使用浮点数的样式标记

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回答您不需要定义严重依赖于#header margin-top的否定height，并且在窗口调整大小时效果很好。

制作此布局的主要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 */
}