使用左侧div填充剩余空间

Question

有人可以告诉我如何使左侧的 div 填满剩余空间，而不必固定右侧 div 的大小吗？

我想要以下示例的完全相反效果：

.left {float: left; border: 1px solid blue;}
.right {overflow: hidden; border: 1px solid blue;}

右侧 div 应该只占用其所需的大小，左侧 div 应占据所有剩余空间。

- user1565557

Answer 1

右侧具有固定宽度的 div 必须使用 float:right;，然后左侧的 div 必须保持原样，以便可以使用其完整可用宽度，但是由于您希望右侧的 div 是固定的，因此必须首先放置它。

HTML:

<div id="parentDiv">
    <div id="rightFixedDiv"></div>
     <div id="leftDynamicDiv></div>
</div>

CSS：

#rightFixedDiv
{
   float:right; 
   border-style:solid; 
   width:100px; 
   height:200px;
}
#leftDynamicDiv
{
   border-style:solid; 
   background-color:blue; 
   overflow:hidden; 
   height:200px;
}

请查看这个链接，它展示了固定宽度为100px的样式：http://jsfiddle.net/dkGbd/ 固定宽度为200px的样式：http://jsfiddle.net/eESTZ/

如果你想要相反的效果，请把左边的div放在前面，并给它添加float:left;属性。

下面是一个演示例子： http://jsfiddle.net/UShek/

- Ali Bassam

---

感谢您的解决方案，没有固定宽度和高度确实起作用了。 - user1565557

@user1565557 不用谢，我只是使用了宽和高度以便我们能够看到背景颜色。 - Ali Bassam

把它放在第一位。我花了很多时间来尝试弄清楚这个问题，这就是为什么！我既生气又感激你的帮助！ - Jacob Raccuia

把它放在第一位，就做到了！谁能想到呢？ - Sandro Antonucci

谢谢你的解决方案。但是如果我不能更改div的顺序，并且我需要左边的div排在第一位怎么办？我的场景是表单输入字段。我需要左侧被拉伸并且必须保持它是第一个字段，以使验证焦点正常工作。如果我更改顺序，第一个错误的验证焦点将在第二个元素上，这对用户来说很困惑。这是我的fiddle：http://jsfiddle.net/qLypn7h8/，即使我将date-input移动到第一个div，我也希望它能够正常工作。 - JustAMartin

Answer 2

大部分工作就是反转你在这里所做的css和html顺序。浮动元素必须始终排在第一位。

<div class="right">this is the right div</div>
<div class="left">left div</div>

那么对应的CSS代码将会是：

.right {
  float: right;
  background: #fef;
}
.left {
  display: block;
  background: #ffe;
}

更新： 这里提供代码演示

- Kyle

---

那差不多行得通了，只是左侧的div现在也填充了本应由右侧div占据的空间。 - user1565557

你能检查我发布的 fiddle 吗？左侧的 div 是否填充了右侧 div 下方的空间？ - Kyle

弹性编辑器看起来是正确的，但奇怪的是，只要我在空的 HTML 测试页面上使用它（使用 HTML5 doctype），你的解决方案渲染就会不同。 - user1565557

Answer 3

我认为最有效的方法是使用“display:flex”，这是一种新的CSS 3方法。你可以搜索了解更多关于这个令人惊奇的显示方式，我从中受益匪浅。 ;)

- Pqpq149