Question

我在父div中有两个div（并排），我希望右div占用剩余空间的100％（即100％ - 200px）并且应该始终保持在左边div（不在左边div之下）：

<div id="wrapper" style="width: 100%;">
    <div id="left" style="background-color: Blue; height: 100px; float: left; width: 200px;"></div>
    <div id="right" style="background-color: Aqua; height: 100px; float: left; width: 100%;"></div>
    <div style="clear: both;"></div>
</div>

Answer 1

由于您只有一个固定宽度的列，请将其向左浮动即可。至于第二列，不要指定浮点数和宽度;这确保它是100％宽。但是你必须添加左边距;否则第二列会干扰浮动的列，例如

浅绿色背景将出现在蓝色背景后面（关闭蓝色背景，看看我的意思）
如果第二列变得比第一列高，则其他内容将开始出现在第一列之下。

<div id="wrapper">
    <div id="left" style="background-color: Blue; height: 100px; float: left; width: 200px;"></div>
    <div id="right" style="background-color: Aqua; height: 100px; margin-left: 200px;"></div>
    <div style="clear: both;"></div>
</div>

Answer 2

制作父包装float。您也可能想删除第二个子div中的width: 100%。并且其宽度由内部的内容量设置。或者你可以拥有两个子div的百分比。示例30%和70%。

Demo here

Answer 3

向右侧div添加位置属性。左div 200px和右div占用剩余空间。

#right{
    background-color:Aqua;
    height:100px;
    position:absolute;
    top:0;
    right:0;
    left:200px;
}

检查http://jsfiddle.net/EpA5F/1/

处的工作示例

Answer 4

好的，所以在较新的浏览器上我们可以使用display：box;和box-flex：1，...属性。我目前在一个只需要Chrome的webproject中使用它，所以这个新的CSS3，为我解决了很多问题。

Answer 5

左边的div应该向左浮动，它的像素宽度使用相对位置。你的右边div应该只有相对位置，也许隐藏溢出。这应该可以解决您的问题。不需要使用清除浮动的div。

Answer 6

接受的答案是好的，但是我遇到了一个问题，即右侧列也不足以支持我的子导航。

使用现代浏览器，您现在可以将所有元素浮动，并使用较酷的CSS获得相同的效果。使用“width：calc（100％ - 380px）;”意味着你可以漂浮你的元素，让它们正确定位，看起来很酷......

.container { float: left; width: 100%; }
.container__left { float: left; width: 380px; height: 100px; background: blue; }
.container__right { float: right; width: calc(100% - 380px); height: 100px; background: green; }

演示http://jsfiddle.net/auUB3/1/

Answer 7

如果您希望右div具有恒定宽度：

 <div style="position:relative">
   <div class='wrapper'>
      <div style="width: 70%"></div>
      <div style="width: 20%"></div>
      <div style="width: 10%"></div>
      <div style="clear:both"></div>
   </div>
   <div class="constant-width"><div>
 </div>

和CSS

 .wrapper{
     margin-right: CONSTANTpx;
 }
 .wrapper div{
     float:left;
 }
 .constant-width{
     top: 0px; right:0px; position:absolute;
     width: CONSTANTpx
 }

无边框工作

JSFiddle

CSS并排div与Pixel和百分比宽度

7 个答案:

检查http://jsfiddle.net/EpA5F/1/