右侧固定宽度 div，填充左侧剩余宽度 div [重复]答案

【问题标题】：Fixed width div on right, fill remaining width div on left [duplicate]右侧固定宽度 div，填充左侧剩余宽度 div [重复]
【发布时间】：2014-09-17 02:34:41
【问题描述】：

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

有没有人碰巧知道这是否可以做到？

我的尝试（在 block1 下渲染 block2）：

<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>

【问题讨论】：

标签： html css

【解决方案1】：

你可以这样做：

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/

【讨论】：

我从来没有意识到标记中的顺序有影响，谢谢！
乐于帮助 :) ;如果对您有帮助，请投票并接受，谢谢
@mickeymoon 这就是你想要的jsfiddle.net/QHTeS/485
这种方法的问题是它需要用户改变代码的结构。这不应该是可以接受的。它违反了将结构与表示和业务逻辑分离的整个想法。
我需要将 overflow:hidden 添加到 left 才能让它为我工作。

【解决方案2】：

浮动两个左元素：

<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，你确定这段代码在 chrome 中有效吗？ :) 对我来说，绿色没有填满剩余的宽度
对不起，我犯了一个小错误，检查我答案的编辑部分，这肯定会使绿色填充剩余的宽度。
啊，谢谢，第二个肯定有效。我喜欢它:)
总是欢迎支持和接受，除非您更喜欢 SANdeep 的其他方法，然后将其标记为已接受。
我同样喜欢你的两个答案，但我先阅读了另一个 1，对不起，我不会让我投票，但我会尽快获得足够的代表点

【解决方案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的使用
使用宽度：100%

【讨论】：

如果你离开
它也可以工作，所以空的 div 已经过时了：jsfiddle.net/zp77csw6

【解决方案4】：

Check this jsfiddle

从一个容器 <div> (#container) 开始，该容器同时包含左右 <div>s。将一个 <div> 浮动到右侧并为其指定特定宽度（在我的示例中为 320 像素）。然后给另一个<div>一个绝对位置，从绝对左侧（0px）开始，到右侧<div>的左边缘（320px）结束。

如果您调整#container 的宽度，右侧<div> 将保持固定在320 像素，而左侧<div> 将扩展以填充剩余区域。

【讨论】：