CSS布局问题

Question

我无法定义必要的CSS样式以实现以下布局:

理想情况下,我希望左边两个div的宽度为200px. div#image总是有100px的高度.但是,我希望div#sidebar并且div#mainContent具有位于相同水平面上的较低边界.它们的大小应足够大,以包含各自的内容,这些内容在页面提供时确定.因此,具有更多内容的那个将导致另一个div向下延伸到相同的距离.

问题在于,通过绝对定位,元素div#sidebar和div#mainContent元素似乎并不承认其子元素的流动.也许我不完全理解绝对定位.此外,使用Javascript来设置页面上元素的内联样式似乎是不好的形式.有没有办法用CSS完成这个？

我也试过浮动div#image和div#sidebar,并设置margin-left属性div#mainContent,但无法让它工作......

任何帮助都感激不尽!

安德鲁

Answer 1

注：这已被视为“无法解决”而被放弃，下面给出了合理的答案，但原始问题问题仍然没有确定的解决方案。

JS 小提琴： http://jsfiddle.net/steve/gHrce/

几乎做了所有事情，可能会帮助你走上正轨。

CSS：

#img {
  background:green;
  float:left;
  height:100px;
  width:200px;
}

#sidebar {
  background:red;
  clear:both;
  float:left;
  width:200px;
}

#mainContent {
  background:yellow;
  margin-left:200px;
}

HTML：

<div id='img'>
  IMG
</div>    

<div id='sidebar'>
  SIDEBAR
  <br />
  <br />
  <br />
</div>   

<div id='mainContent'>
  MAIN CONTENT
  <br style='clear:both' />
</div>

<br />底部的额外内容强制主要内容的高度为侧边栏的高度。

侧边栏中的标签<br />只是为了提供一些额外的高度以用于演示目的。

当然，你可以很容易地添加 Javascript 来扩展侧边栏的高度，但它有很强的 hack 味道：

if($('mainContent').offsetHeight > $('sidebar').offsetHeight + 100) {        
  $('sidebar').style.height = $('mainContent').offsetHeight - 100 + 'px';
}