Question

我有两个DIV堆叠在一起。我希望container DIV中的内容填充box-2 DIV的底部，否则我只能通过使用{来扩展box-2 DIV长度的底部部分{1}}当然，由于返回的结果长度不同，因此效果不佳。下面，具有较亮边框的DIV（DIV <br>）不会填充DIV box-2的内容。如何处理容器以确保它填满较低的container？ box-2 CSS是否应与container合并？

enter image description here

以下是基于https://stackoverflow.com/a/16611274/666891的示例，但它不会填充box-2 div。

enter image description here

以下是相应的HTML代码，对于缺少缩进感到抱歉。

box-2

以下是<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：

box-2

.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; } CSS为MySQL查询的输出创建两列布局：

container

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都包含一个<p>，其中包含<a>。

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

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

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

其次，对于.item，设置height: auto，无需在此处修复。如果这样做，您需要确保高度足以满足标签的高度和子元素的任何边距。

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

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

最初，.item上30px的高度不足以容纳<p>元素上的文本和默认边距，这会导致边距在浮动之间进行交互并打破两个列布局，但由于overflow: auto上没有.container，因此不明显。这可能听起来很模糊，但很容易处理一些经验。

Answer 2

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

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

如果您确实需要浮动.container，可以在overflow:hidden上设置.box-2，这应该清除任何浮点数，从而导致框的高度正确。

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

2 个答案:

更简单的方法