html - 3列布局与列表项

.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;}
ul.three-col-row li:nth-child(3n+3){margin-right: 5%;float: right;}

.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。
如何使空间相等？

最佳答案

原因是您在第三个float: right上有li。设为float: left，您的边距/差距将是一致的。

ul.three-col-row li:nth-child(3n+3) { margin-right: 5%; float: left; }

演示：http://jsfiddle.net/abhitalks/477gg73o/



您也可以使用CSS3 columns使其更容易一些。

片段：

ul {
  list-style: none;
  -webkit-columns: 3;
  columns: 3;
  -webkit-column-gap: 8px;
  column-gap: 8px;
}

h2 {
  margin-top: 0;
}

li {
  -webkit-column-break-inside: avoid;
  column-break-inside: avoid;
}

<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>

关于html - 3列布局与列表项，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27090087/