html - 3 列列表项

Question

我想从列表项中制作 3 列布局。我究竟做错了什么？这是我的 CSS3 代码:

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

CSS3:

.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: 33.33%;margin-right:5%;f loat: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:30px 0 0 0;}
.intro h2{margin-bottom: 15px;}
.intro p{margin-bottom: 50px;}
.intro ul.three-col-row li {max-height:350px;}	

Answer 1

您可以使用 CSS3 列。

.three-col-row {
    -moz-columns: 3;
    -webkit-columns: 3;
    columns: 3;
    -moz-column-gap: 8px;
    -webkit-column-gap: 8px;
    column-gap: 8px;
}

li {
    -webkit-column-break-inside: avoid; 
}
h2 {
    margin: 0px;
}

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

注意:您可以在 http://caniuse.com/#search=columns 查看浏览器支持情况.使用供应商前缀来实现跨浏览器兼容性更安全。

.