.clearself:before,.clearself:after{content: " ";display: block;height: 0;overflow: hidden;}
.clearself:after{clear: both;}
.clearself{zoom: 1;} /* IE < 8 */
ul.three-col-row li{width: 25%;margin-right: 5%;float: left;text-align: center;}
ul.three-col-row li:nth-child(4n+4){margin-right:5%;float: left;} \t
ul.three-col-row li:nth-child(3n+3){margin-right: 5%;float: right;} \t
.intro{margin:60px 0 0 0;}
.intro h2{margin-bottom: 15px;}
.intro p{margin-bottom: 30px;}
.intro ul.three-col-row li {min-height:310px;}
<section class="intro clearself">
<ul class="three-col-row">
<li>
<h2>Wat?..</h2>
<p>Praktische en juiste informatie is een belangrijke deelsleutel tot de oplossing van rugproblemen.</p>
<a class="button" href="advice.html">Meer info!</a>
</li><!--
--><li>
<h2>Hoe...</h2>
<p>Ga zo ver mogelijk in de beweging en herhaal dit regelmatig gedurende U capaciteit.</p>
<a class="button" href="work-out.html">Kies je sport!</a>
</li><!--
--><li class="last-row1">
<h2>Doel...</h2>
<p>Het belangrijkste aspect is echter dat U ontdekt dat U ZELF veel kan doen om uiteindelijk uw rugklacht te vermijden,meer dan U welicht denkt.</p>
<a class="button" href="about.html">Meer info!</a>
</li>
</ul>
</section>
我这个问题是,第二列是不正确居中。第二和第三列之间的空间太大...我的主要内容宽度是90%,我的部分最小高度是310px。 当我在Firefox上测试页面时,我的3列的宽度为275x310px,但它们看起来不相同。当我在Chrome上进行测试时,我的2列的宽度为275x310px,中间的宽度为274x310px。 如何让空间平等?
它的工作就是这样,而不是响应式布局。 – 2014-11-23 14:55:42
嗯,没有看到你描述的问题。 – 2014-11-23 15:04:40
我不能放图片来显示问题出在哪里。问题在于列应该是响应式的。在一个小屏幕上,应该有colums在彼此之下。如果我使用display:table比在大屏幕上完美,但是在移动网站上并不显示在其他下方。 – 2014-11-23 15:20:41