Question

设计师要求两列内容区域布局，左侧列为图像，右侧为文本，第一张图像下方为全宽报价。

客户端将在此CMS驱动的站点中输入内容，因此列需要根据需要垂直扩展。真实网站上没有背景颜色，因此列不需要高度相等。

<div class="container">
    <div class="top-left">Picture here</div>
    <div class="full-width">
        <blockquote>Blockquote here</blockquote>
    </div>
    <div class="bottom-left">Picture here</div>
    <div class="top-right">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    </div>
</div>

.container {
    width: 300px
}
.top-left {
    background:red;
    width:100px;
    height:100px;
    float:left;
}
.top-right {
    background:blue;
    margin-left:100px;
    width:200px;
}
.full-width {
    background:purple;
    float:left;
    width:100%;
    height:80px;
}
.bottom-left {
    background:green;
    float:left;
    width:100px;
    height:100px;
}
p {
    padding:10px;
}

它在Safari，Chrome和IE中运行良好。但是在Firefox中，有一个奇怪的问题，右边的div中有一个单词。

我的修复：http://jsfiddle.net/rfoc71pe/

我在这里已经看到了与无限宽度和空白空间相关的FF浮动错误，但这似乎并非如此，因为我的所有宽度都被定义并且单词正在包装。

问题：有谁知道为什么会发生这种情况，以及它实际上是一个错误还是我的CSS问题？我还想知道是否有办法解决这个问题，感觉不那么黑客？谢谢！

Answer 1

我真的觉得有某种bug。但是，我找到了你的修复:) 这是：JSFiddle。

HTML

<div class="container">
<div class="top-left">Picture here</div>
<div class="full-width">
    <blockquote>Blockquote here</blockquote>
</div>
<div class="bottom-left">Picture here</div>
<div class="top-right">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
</div>

CSS

.container {
    width: 300px
}

.top-left {
    background:red;
    width:100px;
    height:100px;
    float:left;
}

.top-right {
    background:blue;
    margin-left:100px;
    width:200px;
}

.full-width {
    background:purple;
    float:left;
    width:100%;
    height:80px;
    padding: 10px 0 10px 0;
}

.bottom-left {
    background:green;
    float:left;
    width:100px;
    height:100px;
}

p {
    padding: 10px 10px 0 10px;
}

如果你难过，你不需要颜色，你的紫色块会是白色的。在我的解决方案中，您无法看到此块的边界。

尝试写入Mozilla的论坛，并描述您的问题。

这是一个Firefox浮动错误吗？

1 个答案: