創建帶圖像的CSS網格佈局

Question

我試圖使用CSS來製作一個漂亮的網格佈局，但不能讓他們在3行用的33.3333％

的網格樣式我個人列顯示行要去的是this。

這是我到目前爲止的代碼;

HTML：

<section id="web"> 
    <div class="row"> 
    <span class="web large-3 columns"><img src="images/1.gif"></span> 
    <span class="web large-3 columns"><img src="images/2.jpg"></span> 
    <span class="web large-3 columns"><img src="images/3.png"></span> 
    </div> 
    <div class="row"> 
    <span class="web large-3 columns"><img src="images/4.jpg"></span> 
    <span class="web large-3 columns"><img src="images/5.png"></span> 
    <span class="web large-3 columns"><img src="images/6.jpg"></span> 
    </div> 
</section> 

CSS：

section { display: block; } 

section#web { 
background: #f8f8f8; 
padding: 80px 0; 
} 

.row { 
width: 100%; 
margin: 0 auto; 
max-width: 1144px; 
} 

span.web { 
margin-bottom: 20px; 
text-align: center; 
position: relative; 
border: 1px solid #e3e3e3; 
} 

.row .large-3 { 
position: relative; 
width: 33.33333%; 
} 

.row .columns { 
position: relative; 
padding-left: .83333em; 
padding-right: .83333em; 
width: 100%; 
float: left; 
} 

我JSFiddle。

Answer 1

您將寬度設置爲像素。相反，你應該使用百分比，例如寬度：33％。對於這種佈局來說，33.3是一個不錯的選擇，因爲您將20px用於邊距。也許28％會很好。

小提琴：http://jsfiddle.net/Vfffg/119/

.container > div { 
    margin: 20px; 
    width: 28%; 
    height: 100px; 
    background: blue; 
    float: left; 
    color: #fff; 
    text-align: center; 
}