3 colums with item item

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

Answer 1

Вы имели несколько ошибок в коде. Ниже приведена рабочая скрипка: http://jsfiddle.net/4oz6vwd6/2/

Если вы хотите совместить элемент с классом, у вас не должно быть пробела между ними. Иногда вы делали это правильно, иногда нет. Так что это не должно быть ul .three-col-row li:nth-child(4n+4) но ul.three-col-row li:nth-child(4n+4)

Основная проблема, хотя садилась display: inline-block; к вашим ul.three-col-row li.

Я не обновил все поля. Теперь ваша задача - определить маржу и ширину, чтобы добавить до 100%.

Answer 2

Вы можете использовать столбцы 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. Безопаснее использовать префиксы поставщика для совместимости с несколькими браузерами.

.