Проблема с компоновкой сетки CSS/позиционирование изображения

Question

Неполадка при попытке собрать страницу, на которой размещены изображения. Снимок экрана, связанный с тем, что у меня сейчас есть. То, что я пытаюсь получить, будет выглядеть как первая строка изображений (1-5) на всем протяжении страницы с каждой другой противоположной строкой, если это имеет смысл. Изображения 1-8 настроены правильно, но 9-10 находятся на строке 3, а не на строке 2, где я бы хотел их. Изображение 11 должно быть слева, а 12-15 должно быть справа. И так далее ..

Текущий CSS -

#grid { float: left; width: 100%; overflow: hidden; } 
#grid-inner { float: left; width: 890px; overflow: hidden; } 
.item { float: left; margin: 0 0 10px 0; position: relative; } 
.item span { display: none; position: absolute; padding: 0 0 0 0; color: #fff; background: transparent url('../images/back-work.png') 0 0 repeat; } 
.item span a { color: #fff; display: block; height: 100%; width: 100%; } 
.small { width: 210px; height: 125px; } 
.large { width: 420px; height: 260px; } 
.small span { width: 210px; height: 125px; padding: 0 0 0 0; } 
.large span { width: 420px; height: 260px; padding: 0 0 0 0; } 
#project { float: left; width: 100%; } 
#project-content { float: left; width: 100%; border-top: 1px solid #ccc; margin: 0 0 0 0; padding: 0 0 0 0; } 
#project-content-alpha { float: left; width: 200px; } 
#project-content-beta { float: left; width: 410px; } 
#project-content-gamma { float: right; width: 200px; text-align: right; } 
    #project-content-alpha span.light { color: #999; } 
#project-images { float: left; width: 100%; } 
#project-images img { float: left; width: 100%; margin: 0 0 0 0; } 
#project-pagination { float: left; width: 100%; margin: 0 0 0 0; } 
#project-pagination-alpha { float: left; width: 200px; } 
#project-pagination-beta { float: right; width: 200px; text-align: right; } 

Текущая разметка -

<div id="grid"> 
<div id="grid-inner"> 


<div class="item large"> 
<span><a href="" title="">ONE</a></span> 
<a href="" title="ONE"><img src="" width="420" height="260" alt="ONE" /></a> 
</div> 



<div class="item small"> 
<span><a href="" title="">TWO</a></span> 
<a href="" title=""><img src="" width="210" height="125" alt="TWO" /></a> 
</div> 



<div class="item small"> 
<span><a href="" title="">THREE</a></span> 
<a href="" title=""><img src="" width="210" height="125" alt="THREE" /></a> 
</div> 



<div class="item small"> 
    <span><a href="" title="">FOUR</a></span> 
<a href="" title=""><img src="" width="210" height="125" alt="FOUR" /></a> 
</div> 



<div class="item small"> 
<span><a href="" title=""></a></span> 
<a href="" title=""><img src="" width="210" height="125" alt="FIVE" /></a> 
</div> 



    <div class="item small"> 
<span><a href="" title=""></a></span> 
<a href="" title=""><img src="" width="210" height="125" alt="SIX" /></a> 
</div> 



<div class="item small"> 
<span><a href="" title=""></a></span> 
<a href="" title=""><img src="" width="210" height="125" alt="SEVEN" /></a> 
</div> 



<div class="item large"> 
<span><a href="" title=""></a></span> 
<a href="" title=""><img src="" width="420" height="260" alt="EIGHT" /></a> 
</div> 

Любая помощь или предложения по этому вопросу будут оценены. Спасибо заранее!

Answer 1

CSS float s не перемещает элементы по вертикали. Они плавают только по горизонтали.

Если вам нужны вертикальные «поплавки» (например, черепица), вам нужно будет использовать JavaScript. Я рекомендую t he jQuery Masonry Plugin или Vanilla Masonry (jQuery Masonry минус jQuery).

Answer 2

Проверьте интерфейс здесь. Дайте мне знать, если вам нужны изменения.

ИМЕННО было запрошено -http://jsfiddle.net/rxLTG/

HTML

<div class="wrap"> 
    <div class="row"> 
     <img class="lg" src="" alt="1" /> 
     <img class="sm" src="" alt="2" /> 
     <img class="sm" src="" alt="3" /> 
     <img class="sm" src="" alt="4" /> 
     <img class="sm" src="" alt="5" /> 
    </div> 
    <div class="row"> 
     <img class="sm" src="" alt="6" /> 
     <img class="sm" src="" alt="7" /> 
     <img class="lg" src="" alt="8" /> 
     <img class="sm" src="" alt="9" /> 
     <img class="sm" src="" alt="10" /> 
    </div> 
</div> 

CSS

.wrap {width:650px;} 
.wrap img {float:left; width:150px; height:100px;} 
.wrap img.lg {width:350px; height:200px;} 
.row.odd .lg, .row:nth-child(even) .lg {float:right;}​ 

JS

$(function() { 
    $('.row:odd').addClass('odd');​ 
}); 

Answer 3

Лучше всего было бы, как это - http://jsfiddle.net/rxLTG/2/

HTML

<div class="wrap"> 
    <img class="lg" src="" alt="1" /> 
    <img class="sm" src="" alt="2" /> 
    <img class="sm" src="" alt="3" /> 
    <img class="sm" src="" alt="4" /> 
    <img class="sm" src="" alt="5" /> 
    <img class="lg2" src="" alt="6" /> 
    <img class="sm" src="" alt="7" /> 
    <img class="sm" src="" alt="8" /> 
    <img class="sm" src="" alt="9" /> 
    <img class="sm" src="" alt="10" /> 
    <img class="lg" src="" alt="11" /> 
    <img class="sm" src="" alt="12" /> 
    <img class="sm" src="" alt="13" /> 
    <img class="sm" src="" alt="14" /> 
    <img class="sm" src="" alt="15" /> 
    <img class="lg2" src="" alt="16" /> 
    <img class="sm" src="" alt="17" /> 
    <img class="sm" src="" alt="18" /> 
    <img class="sm" src="" alt="19" /> 
    <img class="sm" src="" alt="20" /> 
</div> 

CSS

.wrap {width:500px;} 
.wrap img {float:left; width:125px; height:100px;} 
.wrap img.lg {width:250px; height:200px;} 
.wrap img.lg2 {width:250px; height:200px;float:right;}​ 

Там нет необходимости определять каждую строку внутри DIV , becau se они автоматически подойдут и обернутся.

Кроме того, если вы плаваете большое изображение на каждой строке сначала (влево или вправо), то остальные четыре будут помещаться на место без необходимости использования javascript.

Каждое пятое число будет большим изображением (1,6,11,16,21 и т. Д.). Если вы хотите, чтобы он работал без javascript, используйте это решение. Если вы хотите сохранить исходную систему нумерации, используйте вышеприведенное решение.

Answer 4

Вы можете просто взглянуть на него как на сетку. Больше разметки, но многоразовые и отзывчивые. Например, вы можете обработать этот макет сетки одним классом, который занимает половину его контейнера.

первая строка: - 1 колонка 1/2: 1 имеет большое изображение - 1 колонка 1/2: 4 колонки (1/2 каждый, и каждый из которых содержит небольшое изображение)

Второй строка: просто переверните первые 1/2 столбца

Столбцы плавают, поэтому кол-4 и 5 будут складываться под 1 и 2 ... Ваши изображения должны также иметь правильное соотношение сторон.

И, наконец, поскольку вы - плавающие элементы, очистите группу.

Надеюсь, это поможет.

/* Micro clearfix for the wrapper */ 
 
.wrap:before, 
 
.wrap:after { 
 
    content: ''; 
 
    display: table 
 
} 
 
.wrap:after { 
 
    clear: both; 
 
} 
 
.wrap { width:650px; } 
 
/* no need for size if you put the right images */ 
 
img { 
 
    width:100%; 
 
    height: auto; 
 
    vertical-align: middle; /* removes the gap beneth the image */ 
 
} 
 
/* you can go further and create some other columns */ 
 
.col-1-2 { 
 
    float: left; 
 
    width: 50%; 
 
} 
 
/* demo purpose only */ 
 
img { 
 
    width: 100%; 
 
    height: 100px; 
 
} 
 
img.lg { height: 200px; } 
 

<div class="wrap"> 
 
    <!-- one half of the wrapper --> 
 
    <div class="col-1-2"> 
 
     <img class="lg" src="" alt="1" /> 
 
    </div> 
 
    <!-- one half of the wrapper --> 
 
    <div class="col-1-2">    
 
     <!-- one half of the columns :: 1/4 --> 
 
     <div class="col-1-2">    
 
      <img class="" src="" alt="2" /> 
 
     </div> 
 
     <div class="col-1-2">    
 
      <img class="" src="" alt="3" /> 
 
     </div> 
 
     <div class="col-1-2">    
 
      <img class="" src="" alt="4" /> 
 
     </div> 
 
     <div class="col-1-2">    
 
      <img class="" src="" alt="5" /> 
 
     </div> 
 
    </div> 
 

 
    <!-- then reverse --> 
 
    <div class="col-1-2"> 
 
     <div class="col-1-2">    
 
      <img class="" src="" alt="6" /> 
 
     </div> 
 
     <div class="col-1-2">    
 
      <img class="" src="" alt="7" /> 
 
     </div> 
 
     <div class="col-1-2">    
 
      <img class="" src="" alt="8" /> 
 
     </div> 
 
     <div class="col-1-2">    
 
      <img class="" src="" alt="9" /> 
 
     </div> 
 
    </div>    
 
    <div class="col-1-2"> 
 
     <img class="lg" src="" alt="10" /> 
 
    </div>  
 
</div>