css - float div 一个并排 - 2 列布局

Question

http://optimalpages.de/DrupalMusi/

当左侧边栏比内容短时，如何将主要内容 div 放置在中间而不向左折叠？那可能吗？我不想为导航使用固定高度，但我可以以某种方式说“sidebarleft height = content height”，还是有更简单的方法？

谢谢!

Answer 1

实际上，您只是将元素 float 到 left没有任何包装器元素，所以发生的是这个..

相反，将其他 2 个元素包装在包装器元素内，而不是 float它到 left

.left_wrap {
    float: left;
    width: 30%;
}

.right_wrap {
    float: left;
    width: 70%;
}

.right_wrap > div {
    border: 3px solid #ff0;
    height: 100px;
}


<div class="main">
    <div class="left_wrap">
        Hello
    </div>
    <div class="right_wrap">
        World
        <div></div>
        <div></div>
    </div>
</div>

Demo

Better Demo

---

如果你想要一个更好的，我建议你将盒子包裹在父容器内，而不是 float 子元素， float 父元素。

Demo

---

此外，不要忘记 clear你的 float 元素，只要确保你clear他们，你可以使用像这样的自清除父 CSS

.clear:after {
   content: "";
   clear: both;
   display: table;
}

然后在包含 float 元素作为其子元素的元素上调用上述类，在本例中，它是 <div class="main">所以现在应该是

<div class="main clear">
   <!-- Floated Elements -->
</div>