CSS проблема с адаптивной сеткой с использованием процентов

Question

CSS проблема с адаптивной сеткой с использованием процентов

0

Я работаю над гибким макетом, состоящим из сетки ящиков, из которых два типа. Первый тип "type" содержит только изображение в течение второго div, а второй тип "тип" - половину ширины первого, но он также содержит два меньших изображения, один из которых уложен поверх другого.

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

Здесь jsfiddle, если вы измените размер своего окна браузера, вы увидите проблему: http://jsfiddle.net/DZ7jD/

И вот фрагмент моего кода:

Первый тип коробки:

<div class="item">
    <div>
        <img src="myimage.jpg" />
    </div>      
</div>

Второй тип коробки:

<div class="item stacked">
    <div class="item top">
        <div>
            <img src="myimage.jpg" />
        </div>      
    </div>              
    <div class="item bottom">
        <div>
            <img src="myimage.jpg" />
        </div>      
    </div>                  
</div>

mmmoustache 20 март 2014, в 14:22

Источник

Теги:

html

css

3 ответа

1

Использовать отображение: inline-block; с vertical-align: top; на .item.

.item{
    display:inline-block;
    vertical-align: top;
    width:20%;
}

ДЕМО: http://jsfiddle.net/verber/DZ7jD/5/

IE7 над IE8 не понимает display: inline-block; свойство, вы должны использовать собственный display: inline; с zoom: 1; , И символ * сделает его видимым только для браузеров IE:

display: inline-block;
*zoom: 1;
*display: inline;

DEMO для IE7+: http://jsfiddle.net/verber/DZ7jD/21/

Andrii Verbytskyi 20 март 2014, в 11:56

0

эй андрей, спасибо за помощь! Вы знаете, как я мог заставить это работать, используя поплавки?
mmmoustache 20 март 2014, в 14:24
0

Обновлен верхний комментарий
Andrii Verbytskyi 21 март 2014, в 08:47

0

Ясно должно прекратить прыгать.

Я добавил четкий div после первого ряда изображений.

.clear {clear: both;}

См. Обновление: http://jsfiddle.net/DZ7jD/2/

JRW 20 март 2014, в 10:47

Ещё вопросы

эй андрей, спасибо за помощь! Вы знаете, как я мог заставить это работать, используя поплавки?

mmmoustache · Accepted Answer · 2014-03-20T12-39-00.000Z

Для кого-то другого с подобной проблемой мне удалось исправить это с помощью jQuery. Казалось, что проблема с высотами моего "сложного" класса, поэтому я сделал этот скрипт так, чтобы высоты каждого ящика всегда были одинаковыми:

$(document).ready(FixHeights);
$(window).resize(FixHeights);

function FixHeights(){
    var $x = $(".container > .item").not(".stacked").first().width();
    $(".container > .item").height($x + "px");
}