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

Question

我有两个相互堆叠的 DIV。我想要 container 中的内容DIV 填充 box-2 的底部DIV 否则我只能得到 box-2 的底部部分使用 <br> 扩展的 DIV 长度当然，这效果不佳，因为返回的结果长度不同。下面，相对于 DIV box-2 的内容，边框较浅的 DIV (DIV container) 没有填充。 .应如何处理容器以确保它填满下层 box-2 ？应该container CSS 与 box-2 合并？

这是一个基于 https://stackoverflow.com/a/16611274/666891 的示例虽然它没有填写 box-2分区

这是各自的 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;
}

container为 MySQL 查询的输出创建两列布局的 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

更简单的方法

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

查看演示 fiddle :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)，它包含子元素 div.item宽度为 300px。每个.item包含 <p>用<a> .

你想要每个 .item形成两行，从左到右，从上到下。

你有正确的想法，申请float: left至 div.item .棘手的一点是处理未设置 .container 高度的 float 元素。和崩溃的边距。

首先:设置overflow: auto至 .container ，这样你的边框将包围所有 float 元素。 (从技术上讲，这会生成一个“ block 格式化上下文”。)

其次，对于.item , 设置 height: auto ，这里就不用修了。如果这样做，您需要确保高度足以满足标签的高度和子元素的任何边距。

此外，设置 overflow: auto在 .item以确保您不会因利润率下降而陷入困境。

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

本来.item上的高度30px不够高以容纳 <p> 上的文本和默认页边距元素，这会导致边距在 float 之间相互作用并破坏两列布局，但这并不明显，因为您没有 overflow: auto在 .container .这可能听起来晦涩难懂，但足以处理一些经验。