0

我有 2 个 div 需要并排放置。为此，我放置了第一个绝对值，并在第二个中添加了一个左边距。这行得通。但是我的问题是两者都可以有不同的高度，并且下面的元素总是需要低于最高的元素。

<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，我该如何解决？并且在页脚添加页边距也不起作用，因为我不知道内容有多高。

4

4 回答 4

3

jsFiddle 示例

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; }
于 2012-05-24T11:20:27.973 回答
2

您可以使用浮动和一个项目集来清除双方

小提琴

于 2012-05-24T11:30:36.287 回答
1

这是一个以这种方式具有 2 列样式的纯CSS 布局的链接。这种性质的堆叠列也有布局。你遇到困难的原因是因为绝对因素。通过添加 absolute 属性，您已经从该容器中的块元素集合中删除了该元素（及其高度/宽度）。它将相对于容器保持不变，但不会再影响任何周围的元素。它也不会影响容器本身（例如使其更高）。在应用此定位时，您需要更彻底地使用容器，以便元素独立地拉伸容器而不会失去彼此之间的定位。

于 2012-05-24T11:15:23.520 回答
0

试试这个 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;
}
于 2012-05-24T11:31:49.760 回答