html - 3 colums with list item -
can that? don't know i'm doing wrong. want list items make 3 column layout. here code css3:
<section class="intro clearself"> <ul class="three-col-row"> <li> <h2>wat?..</h2> <p>praktische en juiste informatie 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 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;}
you had couple of mistakes in code. here working fiddle begin with: http://jsfiddle.net/4oz6vwd6/2/
if want match element class should not have space inbetween. did correct not. shouldn't ul .three-col-row li:nth-child(4n+4)
ul.three-col-row li:nth-child(4n+4)
the main problem though setting display: inline-block;
to ul.three-col-row li
.
i did not updated margins. job figure out margins , widths add 100%.
Comments
Post a Comment