Question

我正在研究由盒子网格组成的响应式布局，其中有两种类型。第一个框'type'仅包含第二个div中的图像，第二个框'type'是第一个框的宽度的一半，但它还包含两个较小的图像，一个堆叠在另一个的顶部。

我有一个奇怪的问题，偶尔会有一些盒子掉到下面然后跳回来。这种情况似乎只发生在混合两种类型的盒子时，如果我用第一种类型替换所有第二种盒子类型（反之亦然），没有问题！

这是一个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>

Answer 1

在inline-block;上使用带vertical-align: top;的显示.item。

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

DEMO ：http://jsfiddle.net/verber/DZ7jD/5/

IE7并且IE8不理解display: inline-block;属性，您应该将原生display: inline;与zoom: 1;一起使用。并且*符号将使其仅对IE浏览器可见：

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

针对IE7 +的DEMO ：http://jsfiddle.net/verber/DZ7jD/21/

Answer 2

明确应该停止跳跃。

我在第一行图像后添加了一个清晰的div。

.clear {clear: both;}

请参阅更新：http://jsfiddle.net/DZ7jD/2/

Answer 3

对于有类似问题的其他人，我设法用jQuery解决了这个问题。我的'堆积'类的高度似乎有一个问题所以我制作了这个脚本，以便每个盒子的高度始终相同：

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

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

使用百分比的响应式网格布局的CSS问题

3 个答案: