與列表項3欄佈局

Question

.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。 如何讓空間平等？

Answer 1

的原因是，你有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>

Answer 2

一種解決方案是使用display: table-cell結合了padding: 0 5% 0 5%和刪除floats：

.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%; 
 
    text-align: center; 
 
} 
 
.intro { 
 
    margin: 60px 0 0 0; 
 
} 
 
.intro h2 { 
 
    margin-bottom: 15px; 
 
} 
 
.intro p { 
 
    margin-bottom: 30px; 
 
    max-height: 75px; 
 
    height: 75px; 
 
} 
 
.intro ul.three-col-row li { 
 
    min-height: 310px; 
 
} 
 
ul.three-col-row { 
 
    display: table; 
 
    padding: 0; 
 
    /*remove padding from ul*/ 
 
} 
 
ul.three-col-row li { 
 
    display: table-cell; 
 
    /*set display to table-cell*/ 
 
    padding: 0px 5% 0 5%; 
 
    /*add padding*/ 
 
}

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

Answer 3

我添加了一個主內容的div和編輯/刪除了一些CSS代碼。希望這可以幫助。

.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: 29%;float: left;text-align: center;margin: 0 2% 0 2%;} 
 

 
.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;} 
 
.main-content-box {width: 90%;margin-left:auto;margin-right:auto;position:relative;}

<section class="intro clearself"> 
 
    <div class="main-content-box"> 
 
     <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> 
 
    </div> 
 
    </section>