html - 如何防止 float div 不扩展 sibling

Question

Jsfiddle: http://jsfiddle.net/techsin/ur2w4p86/

<div class="cont">
    <div class="a"></div>
    <div class="b">
        asdfsdf
    </div>
</div>

如果我向 .b 添加左内边距，它的内容不会受到影响，直到内边距大于 .a 的宽度，而 .a 是 float 的。所以基本上 float 元素像兄弟 b 一样扩展它下面的 div。

我不想要那个。我希望第二个 div 与 a 相邻并占用其余空间。我不能使用内联 block ，因为那时我必须为第二个 div 定义确切的宽度，这也不是我想要的，并且没有 css 唯一的方法来告诉第二个 div 填充右边的可用空间。

Answer 1

出现此问题是因为 .b 向左浮动(将其从流中移出)并且 .a 宽度为 100%。如果你想保持这种布局，你需要在 .a 上使用 margin-right 而不是在 .b 上使用 padding-left

.a {
    background-color: green;
    width: 26%;
    float: left;
    margin-right: 10px;
}