用左div填充剩余空间 [英] Fill remaining space with left div

问题描述

任何人都可以告诉我如何使剩下的div填充剩余的空间，而不固定正确的div大小。

Can anyone tell me how to make a left div fill the remaining space, without fixing the right div size.

我想要的正好相反的例子：

I want the exact opposite of the following example:

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

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

The right div should take only the size it needs, the left div should take all the remaining space.

推荐答案

具有固定宽度的右div必须 float：right; 那么左边的div必须保持原样，所以它可以采取其全部可用的宽度，但由于你想要右边的div是固定的，你必须先把它。

The right div with a fixed width must float:right; then the left div must stay as it is so it can take its full available width, but since you want the right div to be fixed, you must place it first.

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

$ b b

检查一下，固定宽度为100px： http://jsfiddle.net/dkGbd/
固定宽度为200像素： http://jsfiddle.net/eESTZ/

现在，如果你想要相反，放置左div第一，给它一个 float：left;

Now if you want the opposite, place the left div first, give it a float:left;

工作示例：
http://jsfiddle.net/UShek/

这篇关于用左div填充剩余空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！