html - CSS 布局问题

Question

我在定义实现以下布局所需的 CSS 样式时遇到问题:

理想情况下，我希望左侧两个 div 的宽度为 200 像素。 div#image 的高度始终为 100px。但是，我希望 div#sidebar 和 div#mainContent 具有位于同一水平面上的下边框。它们的大小应该足够大以包含它们各自的内容，这是在提供页面时确定的。因此，具有更多内容的一个将导致另一个 div 向下延伸到相同的距离。

问题在于，对于绝对定位，div#sidebar 和div#mainContent 元素似乎无法识别其子元素的流向。也许我不完全理解绝对定位。此外，使用 Javascript 来设置页面上元素的内联样式似乎是一种错误的形式。有没有一种方法可以仅使用 CSS 来完成此操作？

我也试过 float div#image 和 div#sidebar，并在 上设置 margin-left 属性div#mainContent，但无法使其正常工作...

任何帮助将不胜感激!

安德鲁

Answer 1

演示:http://jsfiddle.net/TRa35/

html

<div id="wrapper">
    <div id="div-image">div image</div>
    <div id="div-maincontent">
        <div id="div-sidebar">
            div sidebar
        </div>
        div maincontent
        <button>click to add content</button>
        <br />
        <span></span>
    </div>
</div>

CSS

html, body {
    margin:0;
    padding:0; 
}

#wrapper {
    position:relative;
}

#div-image {
    position:absolute;
    left:0;
    top:0;
    width:200px;
    height:100px;
    background-color:#cef;
}

#div-sidebar {
    position:absolute;
    left:-200px;
    top:100px;
    bottom:0;
    width:200px;
    background-color:#efc;
}

#div-maincontent {
    position:absolute;
    left:200px;
    right:0;
    top:0;
    background-color:#fce;
    min-height:300px;
}