Создание макета сетки CSS с изображениями

Question

Я пытаюсь сделать хороший макет сетки с помощью CSS, но не может получить их, чтобы отобразить в строках 3 с отдельной строки столбца 33.3333%

Стиль сетки I 'm going for is 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; 
}