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

<强>更新这是fiddle

Answer 3

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

用左div填充剩余空间

3 个答案: