0

我有两个相互堆叠的 DIV。我希望 DIV 中的内容container填充 DIV 的底部，box-2否则我只能box-2通过使用来扩展 DIV 长度的底部<br>，当然这不能很好地工作，因为返回的结果会有所不同长度。下面，具有较浅边框 (DIV box-2) 的 DIV 不会填充 DIV 的内容container。应如何处理容器以确保其充满下部box-2？CSS应该container与合并box-2吗？

在此处输入图像描述

这是一个基于https://stackoverflow.com/a/16611274/666891的示例，尽管它没有填充box-2div。

在此处输入图像描述

这是相应的 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-2CSS：

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

2 回答 2

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

这是如何工作的

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

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

你有正确的想法，float: left申请div.item。棘手的一点是处理没有设置高度.container和折叠边距的浮动元素。

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

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

此外，overflow: auto请.item确保您不会因页边距折叠而陷入困境。

最后，通过对.item p.

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

于 2013-05-17T14:15:27.327 回答
0

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

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

如果您确实需要浮动，.container您可以设置哪个应该清除任何浮动，从而使框的高度正确。overflow:hidden.box-2

于 2013-05-17T13:56:38.937 回答