创建带图像的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; 
}