Question

流体布局有问题。它主要工作正常，但在某些窗口宽度，四个浮动div元素之一跳下来。这发生在近20个不同的宽度，并且仅在一个像素处。例如，它看起来很奇怪，为346px而不是347px。

有两行并排有两个元素。前两个总是有效，但第二行的最后一个元素是跳下来的那个。

没有保证金问题 - 我已经尝试将浮动div的宽度设置为40％，但即便如此，行为仍然是相同的。

我也不在任何地方使用clear。我只使用带有CSS3 box-sizing - 属性的填充来避免这个问题，还因为我想在填充中使用em。

有四个recipe-teaser;我只包含一个，因为代码完全相同。

<div id="recipe-gateway">
    <h1>Veckans recept</h1>

    <div class="recipe-teaser">

        <h2 class="recipe-teaser-headline"><a href="#">Potatissoppa</a></h2>
        <a href="#"><img class="recipe-teaser-img" src="potatissoppa.jpg" alt="Potatissoppa" /></a>
        <div class="time"><p>20 min</p></div>

        <div class="recipe-teaser-link">
            <a href="#" class="related-link">Till receptet</a>
        </div>

    </div>

</div>

CSS：

div {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.recipe-teaser {
    width: 50%;
    float:left;
    padding:0 0.825em 0 0.825em;
 }

父元素：

#recipe-gateway {
    overflow:hidden;
    margin: 0 -0.625em -0.625em -0.625em;
    padding: 0 0 1.25em 0;
}

＃recipe-gateway的父母：

#container {
    width:100%;
    background-color: white;
    padding: 1em;
    margin: 0 0 1% 0;
    overflow:hidden;
}

容器：

#container {
width:100%;
padding: 1%;
background-color:#727D07;
overflow:hidden;
}

这种情况发生在最新版本的Chrome中。在FireFox中，最后一个元素总是被跳下来。

Answer 1

问题解决了。奇怪的是，原始图像是639px而不是600px宽。所有图像都在CSS中调整大小，但由于数字不均匀，可能会导致问题。

浮动的div在某些窗口宽度处以流体布局向下跳跃

1 个答案: