Css 合并DIV，以便内容正确地填充另一个DIV

我有两个DIV，它们叠在一起。我希望

容器

DIV中的内容填充

box-2

DIV的底部，否则我只能通过使用

来扩展

box-2

DIV的底部长度，当然，这不起作用，因为返回的结果长度不同。下面，带有较浅边框的DIV（DIV

box-2

）不填充DIV

容器的内容。应如何处理容器以确保其填满下方的
框-2
？是否应将
容器
CSS与
box-2
合并


下面是一个基于的示例，尽管它没有填充
框-2
div


下面是相应的HTML代码，很抱歉没有缩进

<div class="box-2">
<div class="border-top">
<div class="border-bot">
<div class="border-left">
<div class="border-right">
<div class="corner-top-left">
<div class="corner-top-right">
<div class="corner-bot-left">
<div class="corner-bot-right">
<div class="box-indent1">
<div id="boxtwo-header">
<div align="center">
<?php
echo "$myrow3[2]";
?>
</div>
</div>
<br><br><br>
<?php
echo '<div class="container">';
$q = mysql_query("SELECT * FROM name WHERE Field4 = '$cat'",$db);
while ($res = mysql_fetch_array($q)){
    echo '<div class="item"><p><a href="page.php?page=' . $res['Field2'] . '&' . $res['Field6'] . '">' . $res['Field1'] . '</a></p></div>';
}
echo '</div>';
?>
<br>
<br>
<br>
<br>
<br>
<br>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="clear"></div>

容器
CSS，为MySQL查询的输出创建两列布局：

.container {
        width: 600px;
        float: left;
        border-width: 2px;
        border-spacing: ;
        border-style: outset;
        border-collapse: collapse;
}
.container .item {
        width: 300px;
        float: left;
        height: 30px;
        padding-top: 2px;
        padding-bottom: 2px;
}
.container .item a{
        font-family: Arial, Helvetica, sans-serif;
        font-size: 10.5pt;
        font-style: normal;
        font-weight: normal;
        text-transform: capitalize;
        color: #000000;
        text-decoration: none;
}
.container .item a:hover {
        color: #FF0000;

实际标记的JSFIDLE将有助于调试

看起来
.container
div正在浮动，我不明白为什么需要这样做，如果删除浮动，内容应该将
.box-2
推到正确的高度

如果您确实需要浮动
.container
，您可以在
.box-2
上设置
溢出：隐藏
，这样可以清除所有浮动，从而使长方体具有正确的高度。
更简单的方法
我要解决的问题是如何让两列布局正常工作

请参见演示小提琴：

考虑以下HTML：

<div class="container">
    <div class="item">
        <p><a href="#">Your label...1</a></p>
    </div>
    <div class="item">
        <p><a href="#">Your label...2</a></p>
    </div>
    ...
    <div class="item">
        <p><a href="#">Your label...7</a></p>
    </div>
</div>

这是如何工作的

您有一个固定宽度为600px的父容器（
div.container
），其中包含宽度为300px的子元素
div.item
。每个
.item
都包含一个带有
的

您希望每个
.item
形成两行，从左到右，从上到下

您的想法是正确的，将
float:left
应用于
div.item
。棘手的一点是处理未设置
.container
高度和折叠边距的浮动元素

首先：将
溢出：auto
设置为
.container
，这样您的边框将包含所有浮动元素。（从技术上讲，这会生成“块格式上下文”。）

其次，对于
.item
，设置
高度：auto
，无需在此处进行修复。如果这样做，则需要确保高度足以容纳标签的高度以及子元素上的任何边距

另外，在
.item
上设置
overflow:auto
，以确保您不会因为折叠边距而遇到麻烦

最后，在
.item p
上加一个边距，设置内部段落/链接的样式

最初，
.item
上的30px高度不够高，无法容纳
元素上的文本和默认边距，这将导致边距在浮动之间相互作用，并破坏两列布局，但这并不明显，因为在
.container
上没有
溢出：auto
。这听起来可能不太清楚，但处理一些经验很容易。
看起来您正试图为MySQL查询生成的
.item
元素列表创建一个两列布局。您的项目从左到右列出，然后它们包装成多行。您还试图创建一个圆角边框。您是否考虑过使用CSS3中的
边界半径
？没错，
容器
DIV确实创建了一个两列布局。我将把这一点补充到问题中。可以随意提供CSS3代码建议，但首要任务是以某种方式将
容器
DIV数据放入
box-2
中attack@MarkSchultheiss,我没有编写MySQL查询，但是如果您愿意，可以随时提供关于减少漏洞的反馈。感谢您对所提供代码的详细解释！我已经用你提供的代码的屏幕截图更新了这个问题，但是我得到了类似的结果。诀窍是我试图将
容器
div中的内容放入
box-2
div中。目前它们有点重叠。我用
.box-2
更新了fiddle，演示了如何添加标题/标题，并给出了一些注释来指导您如何调整间距等等。你应该走得很好！如果<代码>浮动：左已从
容器中删除
，但它仍不会填充
框-2
div。
<div class="container">
    <div class="item">
        <p><a href="#">Your label...1</a></p>
    </div>
    <div class="item">
        <p><a href="#">Your label...2</a></p>
    </div>
    ...
    <div class="item">
        <p><a href="#">Your label...7</a></p>
    </div>
</div>

.container {
    overflow: auto; /* Important*/
    width: 600px;
    border-width: 2px;
    border-style: outset;
    border-collapse: collapse;
    background-color: white;
}
.container .item {
    overflow: auto; /* Important */
    width: 300px;
    float: left;
    height: auto; /* Let the .item p determine the box height ... */
    padding-top: 2px;
    padding-bottom: 2px;
    outline: 1px dotted blue; /* Optional for demonstration... */
}
.container .item p {
    outline: 1px dashed blue; /* Optional for demonstration... */
    margin: 1.00em 0.50em; /* Gives you some control on the spacing...*/
}