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

Question

我有两个DIV堆叠在一起我希望来自container DIV的内容填充box-2 DIV的底部，否则我只能通过使用<br>来扩展box-2 DIV长度的底部部分，当然这不能很好地工作，因为返回的结果长度各不相同。下面，具有较亮边框的DIV (DIV box-2)不会相对于DIV container的内容进行填充。应该如何处理容器以确保它填满较低的box-2？是否应该将container CSS与box-2合并

​

​

下面是一个基于https://stackoverflow.com/a/16611274/666891的示例，尽管它没有填充box-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>

下面是box-2 CSS：

.box-2 {
        margin: 0 4px 39px 3px;
}
#boxtwo-header {
/*      background: url(images/titles-act3.gif) no-repeat 0% 0%; */
        position: absolute;
        color: #000;
        vertical-align: middle;
        text-align: center;
        font-family: Arial, Helvetica, sans-serif;
        font-weight: bold;
        font-size: 16px;
        height: 26px;
        width: 612px;
        padding-top: 10px;
        border-top-width: 0px;
        border-right-width: 0px;
        border-bottom-width: 1px;
        border-left-width: 0px;
        border-top-style: solid;
        border-right-style: solid;
        border-bottom-style: solid;
        border-left-style: solid;
        border-top-color: #E9E9E9;
        border-right-color: #E9E9E9;
        border-bottom-color: #E9E9E9;
        border-left-color: #E9E9E9;
        margin-top: 0px;
        margin-right: -5px;
        margin-bottom: 0px;
        margin-left: -3px;
}

.box-2 .border-top {
        background: #fff url(images/border-top2.gif) repeat-x 0% 0%;
}
.box-2 .border-bot {
        background: url(images/border-bot2.gif) repeat-x 0% 100%;
}
.box-2 .border-left {
        background: url(images/border-left2.gif) repeat-y 0% 0%;
}
.box-2 .border-right {
        background: url(images/border-right2.gif) repeat-y 100% 0%;
}
.box-2 .corner-top-left {
        background: url(images/corner-top-left2.gif) no-repeat 0% 0%;
}
.box-2 .corner-top-right {
        background: url(images/corner-top-right2.gif) no-repeat 100% 0%;

.box-2 .corner-bot-left {
        background: url(images/corner-bot-left2.gif) no-repeat 0% 100%;
}
.box-2 .corner-bot-right {
        background: url(images/corner-bot-right2.gif) no-repeat 100% 100%;
        width: 100%;
}
.box-2 .box-indent {
        padding: 4px 33px 32px 37px;
}
.box-2 .box-indent1 {
        position: relative;
        padding-right: 4px;
        padding-bottom: 5px;
        padding-left: 5px;
}
.box-2 p {
        padding: 0 0 15px 0 !important;
        line-height: 1.417em !important;
        color: #000000 !important;
}

为MySQL查询的输出创建两列布局的container CSS：

.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;

Answer 1

更简单的方法

我正在解决让两列布局工作的问题。

查看演示小提琴：http://jsfiddle.net/audetwebdesign/6L4MK/

考虑以下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>

和以下CSS：

.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...*/
}

这是如何工作的

您有一个固定宽度为600px的父容器(div.container)，它包含宽度为300px的子元素div.item。每个.item都包含一个带有<a>的<p>。

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

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

首先:将overflow: auto设置为.container，这样您的边框将包含所有浮动元素。(从技术上讲，这会生成一个“块格式化上下文”。)

第二，对于.item，设置height: auto，不需要在这里修改它。如果这样做，则需要确保高度足以容纳标签的高度和子元素上的任何边距。

此外，在.item上设置overflow: auto，以确保您不会因利润缩水而陷入麻烦。

最后，通过将页边距应用于.item p来设置内部段落/链接的样式。

最初，.item上30px的高度不足以容纳<p>元素上的文本和默认边距，这会导致浮动之间的边距交互并破坏两列布局，但这并不明显，因为.container上没有overflow: auto。这可能听起来晦涩难懂，但对于处理一些经验来说已经足够简单了。

Answer 2

实际标记的jsfiddle将有助于调试。

看起来.container div被浮动了，我不明白为什么需要这样做，如果你移除了浮动，内容应该会把.box-2推到正确的高度。

如果你确实需要浮动.container，你可以在.box-2上设置overflow:hidden，这应该会清除所有的浮点数，从而使框的高度正确。