固定宽度的div在右侧，剩余宽度的div在左侧填充。

Question

我正在寻找一种方式，使两个div作为列，其中右侧的div具有固定宽度，而左侧的div填充剩余空间。

有人知道是否可以实现吗？

我的尝试（将块2呈现在块1下面）：

<style>
.block1 {
   width: auto;
   height: 200px;

   background-color: green;
}
.block2 {
   float: right;
   height: 200px;
   width: 200px;

   background-color: red;
}
</style>

<div class="block1">test1</div>
<div class="block2">test2</div>

- Thomas

Answer 1

你可以这样做：

HTML:

你可以像这样做：

HTML：

<div class="right">right</div>
<div class="left">left</div>

CSS：

.left{
    background:red;

}
.right{
    float:right;
    width:200px;
    background:green
}

看这个实时例子：http://jsfiddle.net/QHTeS/2/

- sandeep

---

我从未意识到标记语言中的顺序会有所不同，谢谢！ - Thomas

@mickeymoon 这是你想要的：http://jsfiddle.net/QHTeS/485/ - sandeep

这种方法的问题在于它要求用户改变代码的结构，这是不应该被接受的。它违反了将结构、展示和业务逻辑分离的整个理念。 - crush

如果左侧 div 的内容溢出需要隐藏，该怎么办？ - Nerian

我需要在left中添加overflow:hidden才能使它对我起作用。 - ulmangt

Answer 2

浮动（float）两个元素都向左：

<style>
.block1 {
   width: auto;
   height: 200px;
   float: left;
   background-color: green;
}
.block2 {
   float: left;
   height: 200px;
   width: 200px;

   background-color: red;
}
</style>

<div class="block1">test1</div>
<div class="block2">test2</div>

为了避免破坏页面布局，您还应该将它们放入容器中。 :)

http://jsfiddle.net/tcFjN/

---

那是错误的!

在父级元素上使用display: table;，在子元素上使用display: table-cell;:

<div id="wrapper">
    <div class="block1">test1</div>
    <div class="block2">test2</div>
</div>


#wrapper
{
    display: table;
    width: 100%;
}

.block1 {
       width: auto;
       height: 200px;
       display: table-cell;
       background-color: green;
}
.block2 {
       display: table-cell;
       height: 200px;
       width: 200px;
       background-color: red;
    }

http://jsfiddle.net/tcFjN/1/

- Kyle

---

Kyle，你确定这段代码在Chrome中能正常工作吗？ :) 对我来说，绿色部分没有填满剩余的宽度。 - Thomas

抱歉，我犯了一个小错误，请检查我的回答中的“编辑”部分，这一定会使绿色填充剩余的宽度。 - Kyle

啊，谢谢，第二个肯定可以。我喜欢它 :) - Thomas

欢迎点赞和采纳，除非您更喜欢SAndeep提供的另一种方法，请将其标记为已接受。 - Kyle

我同样喜欢你们两个的回答，但我先看了另一个，抱歉。我现在还不能给它点赞，但是当我有足够的声望点数时，我会尽快点赞的。 - Thomas

+1 我喜欢这个，非常响应 :) - Arkana

Answer 3

这是我的非浮动解决方案。唯一的注意事项是我需要使用一个包装器。因此，如果所需的HTML为：

parent (has a border, margin, padding,...)
  left (fixed width)
  right (variable width, fill the entire space)

我必须将其重写为

   parent (has a border, margin, padding,...)
      wrapper (has no styling)
        left (fixed width)
        right (variable eidthm, fill the entire space)

我的HTML代码是：

  <div style="border:1px solid black; background:red; margin:10px; padding:10px;" >
    <div style=""> 
      <div style="display:table-cell; padding:10px; min-width:100px; max-width:100px;background:green;">Left</div>
      <div style="display:table-cell; padding:10px; width:100%; background:yellow;">Main content</div>
    </div>
  </div>

这里的主要要点是：

• 不使用display:table，因为这样无法设置边框
• 使用min-width、max-width
• 使用width:100%

- islegmar

---

如果您省略<div style="">，它也可以正常工作，因此空的div已经过时：http://jsfiddle.net/zp77csw6/ - patrick

Answer 4

查看这个jsfiddle

首先创建一个容器<div>（#container），其中包含左右两个<div>。将其中一个<div>向右浮动，并给它一个特定的宽度（在我的示例中为320px）。然后给另一个<div>一个绝对位置，从绝对左侧开始（0px），并结束于右侧<div>的左边缘（320px）。

如果调整#container的宽度，则右侧<div>将保持固定为320px，而左侧<div>将扩展以填充其余区域。

- daGUY