Question

经过两天的研究和各种测试，我似乎无法真正解决这个问题。我需要一个div，它包含两个并排的div作为两列，就像在图像中一样。 http://i.gyazo.com/bbfdcf09a2178fc0e662c59fae995988.png

第一个div（白色）必须采用正确的大小才能正确包含两列。

我基本上尝试了两种方法： 1）使两列浮动：向左并添加一个清除：两个空div。问题是，当一列变得比第一列高时，它会缠绕它。代码是：

<div style="position:relative; background-color:#fff">
<div style="float:left; width:50px;">
    this is the first column
</div>
<div style="float:left; font-family:trebuchet MS, sans-serif;">
    The second column..contains various divs.
    <div> a header </div>
    <div> some more contents </div>
    <div> a footer </div>
</div>
<div style="clear:both;"></div></div>

2）使两列位置：绝对并手动放置它们。它可以工作，但我不能让容器正确调整大小..

Answer 1

我不知道与您页面上其余代码相关的这段代码的上下文，但是您可以使外部div浮动吗？因为它包含两个浮点但它本身没有的div，它会折叠并且它的白色背景不会向下延伸以匹配其中div的高度。让它浮动也意味着它，你也可以摆脱<div style="clear: both;"></div>标签。

我已经删除了一些代码，只留下了我所得到的关键：

<div style="float: left;">
    <div style="float:left; width: 50px;">
        this is the first column
    </div>
    <div style="float: left;">
        The second column..contains various divs.
        <div> a header </div>
        <div> some more contents </div>
        <div> a footer </div>
    </div>
</div>

两列非重叠div布局

1 个答案: