两个div,一个固定的宽度,另一个,其余的

我有两个div容器

虽然需要一个特定的宽度,我需要调整它,所以,另一个div占据了空间的其余部分。 有什么办法可以做到这一点?

.left { float: left; width: 83%; display: table-cell; vertical-align: middle; min-height: 50px; margin-right: 10px; overflow: auto; } .right { float: right; width: 16%; text-align: right; display: table-cell; vertical-align: middle; min-height: 50px; height: 100%; overflow: auto; } 
 <div class="left"></div> <div class="right"></div> <!-- needs to be 250px --> 

请参阅: http : //jsfiddle.net/SpSjL/ (调整浏览器的宽度)

HTML:

 <div class="right"></div> <div class="left"></div> 

CSS:

 .left { overflow: hidden; min-height: 50px; border: 2px dashed #f0f; } .right { float: right; width: 250px; min-height: 50px; margin-left: 10px; border: 2px dashed #00f; } 

你也可以使用display: table来做到这一点,这通常是一个更好的方法: 我怎样才能把一个input元素放在同一行上作为它的标签?

你可以使用calc()函数的CSS。

演示: http : //jsfiddle.net/A8zLY/543/

 <div class="left"></div> <div class="right"></div> .left { height:200px; width:calc(100% - 200px); background:blue; float:left; } .right { width:200px; height:200px; background:red; float:right; } 

希望对你有帮助!!

如果你可以翻转源代码中的顺序,你可以这样做:

HTML:

 <div class="right"></div> // needs to be 250px <div class="left"></div> 

CSS:

 .right { width: 250px; float: right; } 

一个例子: http : //jsfiddle.net/blineberry/VHcPT/

添加一个容器,你可以用你当前的源代码顺序和绝对位置来做到这一点:

HTML:

 <div id="container"> <div class="left"></div> <div class="right"></div> </div> 

CSS:

 #container { /* set a width %, ems, px, whatever */ position: relative; } .left { position: absolute; top: 0; left: 0; right: 250px; } .right { position: absolute; background: red; width: 250px; top: 0; right: 0; } 

在这里, .left div从topleftright样式中获得一个隐式设置的宽度,允许它填充#container的剩余空间。

例如: http : //jsfiddle.net/blineberry/VHcPT/3/

这是2017年,最好的方法是使用flexbox,这是IE10 +兼容 。

 .box { display: flex; } .left { flex: 1; /* grow */ border: 1px dashed #f0f; } .right { flex: 0 0 250px; /* do not grow, do not shrink, start at 250px */ border: 1px dashed #00f; } 
 <div class="box"> <div class="left">Left</div> <div class="right">Right 250px</div> </div> 

如果你可以把它们包装在一个容器<div>你可以使用定位来将左边的<div>锚定在left:0;right:250px ,参见这个演示 。 我现在要说,这在IE6中将不起作用,因为只有一个<div>一个angular落可以完全定位在页面上( 请参阅此处以获取完整说明)。

1-有一个包装div,设置填充和边距,只要你喜欢
2-使左侧div所需的宽度,并使其向左浮动
3-设置右边的div边距等于左边的宽度

 .left { ***width:300px;*** float: left; overflow:hidden; } .right { overflow: visible; ***margin-left:300px;*** } <div class="wrapper"> <div class="left"> ... </div> <div class="right" > ... </div> </div> 

希望这对你有用!

有很多方法可以完成,负利润率是我的最爱之一:

http://www.alistapart.com/articles/negativemargins/

祝你好运!

设置你的权利,以特定的宽度和漂浮,在左侧设置边距右到250px

 .left { vertical-align: middle; min-height: 50px; margin-right: 250px; overflow: auto 

}

 .right { width:250px; text-align: right; display: table-cell; vertical-align: middle; min-height: 50px; height: 100%; overflow: auto } 

使用简单这可以帮助你

 <table width="100%"> <tr> <td width="200">fix width</td> <td><div>ha ha, this is the rest!</div></td> </tr> </table>