Question

您好我遇到了CSS设计问题。我有2个浮动div，其中第一个总是200 px宽度，其中第二个div必须是页面宽度的其余部分。如何才能做到这一点？我尝试过宽度：自动和100％

<div style="float: left; width: 200px">
</div>
<div style="float: left;">
</div>

Answer 1

最接近你的例子：

<div style="float: left; width: 200px;">
</div>
<div style="margin-left: 200px;">
</div>

Answer 2

它正在工作，但div正在调整它的内容，现在是空的，如果你想把它留空，试试“display：block;

Answer 3

我认为这可能就是你要找的东西。

Expand div to max width when float:left is set

Answer 4

您不需要第二个<div>。试试这个：

<html>
   <body>
      <div style="float: left; width: 200px; margin-right: 20px;">
          Floating Content
      </div>
      Main Content
   </body>
</html>

主要内容将环绕浮动<div>的底部，因此如果您不想要，则必须设置高度。

Answer 5

到目前为止，最好的诀窍是仅float左div：

http://jsfiddle.net/8y2t2/

#left {
    width: 200px;
    float: left;
    background: #ccc
}
#right {
    background: red;
    overflow: hidden
}
<div id="left">left</div>
<div id="right">right</div>

这样做的一个好处是你不需要将左div的宽度指定为width和margin-left（如此处的其他答案一样））。这要归功于overflow: hidden。

比较：http://jsfiddle.net/8y2t2/1/与http://jsfiddle.net/8y2t2/2/

如果您想要多个实例：http://jsfiddle.net/8y2t2/3/

2左浮动div，固定大小和自动宽度

5 个答案: