css - 用左 div 填充剩余空间

Question

谁能告诉我如何在不固定右 div 大小的情况下让左 div 填充剩余空间。

我想要与以下示例完全相反的内容：

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

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

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/

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

更新： 这是小提琴

Answer 3

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