Question

我有2个div需要并排。为此，我放置了第一个absolut，只是在第二个上添加了一个边距。这有效。但我遇到的问题是，两者都有不同的高度，下面的元素总是需要低于最高值。

<div id="header">
    The header
</div>
<div id="contents">
    <div class="sidebar">
        <ul>
            <li><a href="">Link 1</a></li>
            <li><a href="">Link 2</a></li>
            <li><a href="">Link 3</a></li>
            <li><a href="">Link 4</a></li>
            <li><a href="">Link 5</a></li>
        </ul>
    </div>
    <div class="body">
        <p>Some content</p>
    </div>
</div>
<div id="footer">
   The footer
</div>

这是fiddler中的完整代码：

http://jsfiddle.net/qPtXL/17/

如何在没有Javascript的情况下解决这个问题？并且在页脚中添加margin-top也不起作用，因为我不知道内容有多高。

Answer 1

jsFiddle example

HTML：

<div id="header">
    The header
</div>
<div id="contents">
    <div class="sidebar">
        <ul>
            <li><a href="">Link 1</a></li>
            <li><a href="">Link 2</a></li>
            <li><a href="">Link 3</a></li>
            <li><a href="">Link 4</a></li>
            <li><a href="">Link 5</a></li>
        </ul>
    </div>
    <div class="body">
        <p>Some content</p>
    </div>
    <div class="clear"></div>
</div>
<div id="footer">
   The footer
</div>

的CSS：

#header {
    border: 1px solid red;
    padding: 10px;
    font-size: 20px;
}

#contents .sidebar {
    width: 120px;
    float: left;
    background-color: gray;
}

#contents .body {
    margin-left: 120px;
    border: 1px solid green;
}

#footer {
    border: 1px solid red;
    padding: 10px;
    font-size: 20px;
}

.clear { clear: both; }

Answer 2

您可以使用浮动和设置为清除双方的项目

fiddle

Answer 3

以这种方式具有2列样式的

Here is a link to a css only layout。这种性质的堆叠柱也有布局。你遇到困难的原因是绝对因素。通过添加绝对属性，您已从该容器中的块元素集合中删除了该元素（及其高度/宽度）。它将保持相对于容器，但它将不再影响任何周围的元素。它也不会影响容器本身（例如使其更高）。在应用此定位时，您需要更加彻底地了解容器的使用情况，以便元素可以独立地拉伸容器而不会相互失去定位。

Answer 4

试试这个CSS

#header {
    border: 1px solid red;
    padding: 10px;
    font-size: 20px;
    float: left;
    width: 100%
}

#footer {
    border: 1px solid red;
    padding: 10px;
    font-size: 20px;
    float: left;
    width: 100%
}

#contents {
    width: 100%;
    height: auto;
    float;
    left;
}

#contents .sidebar {
    height: auto;
    width: 220px;
    float: left;
    border: 1px solid red;
}

将div放在绝对div下面，高度可变

4 个答案: