0

我对流畅的布局有疑问。它大部分工作正常，但在某些窗口宽度下，四个浮动 div 元素之一会跳下来。这发生在近 20 种不同的宽度上，并且仅发生在一个像素上。例如，它在 346 像素时看起来很奇怪，但在 347 像素时却不是。

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

没有边距问题 - 我尝试将浮动 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 中，最后一个元素总是向下跳。

4

1 回答 1

0

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

于 2013-10-30T14:48:28.787 回答