css - 使用浮动样式标记

Question

鉴于此标记，

<div id="header"></div>
<div id="content"></div>
<div id="sidebar"></div>

#header {
  no styles at all
}

#content {
  float: left;
}

#sidebar {
  float: right;
}

如何在不更改标记的情况下使用 CSS 浮动定位 div？

Answer 1

你需要这样的东西吗？

http://jsfiddle.net/JVJ9Q/2/

Answer 2

试试这个小提琴：http: //jsfiddle.net/PZkeh/

尊重 Pēteris 的回答，您不需要定义margin-top严格依赖于 #headerheight并且在调整窗口大小时效果很好的否定。

制作此布局的主要 CSS 规则是

#sidebar { 
    position: absolute; 
    right   : 0; 
    top     : 0;
    width   : 100px;
    min-height: 150px; 
}

body {
    position: relative; /* not necessary if you apply this style to the body */
    padding-right: 120px;
    min-width: 300px; /* this should be adjusted to contain sidebar + header width */
}