19

我在父 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>

4

7 回答 7

41

Since you have only one fixed width column, float it left and that is it. As for the second column, do not specify float and width; this makes sure it is 100% wide. But you must add a left margin; otherwise the second column will interfere with the floated column e.g.

  • aqua background will appear behind blue background (turn off the blue background to see what I mean)
  • if second column becomes taller than first one, additional content will start appearing below the first column.

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

于 2011-03-17T07:50:20.007 回答
2

make the parent wrapper float. Also you would probably want to remove the width: 100% in the second child div. And have its width set by the amount of content inside. Or you could have percentage for both child divs. Example 30% and 70%.

Demo here

于 2011-03-17T07:46:31.067 回答
2

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

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

在http://jsfiddle.net/EpA5F/1/检查工作示例

于 2011-03-17T07:51:13.193 回答
1

好的，所以在较新的浏览器上，我们将能够使用 display: box; 和 box-flex: 1,... 属性。我目前在一个只需要 Chrome 的 web 项目中使用它，所以这个新的 CSS3 东西为我解决了很多问题。

于 2011-10-02T23:15:30.573 回答
1

接受的答案很好，但我遇到了一个问题，即右栏在我的子导航下方，因为它也是浮动的。

使用现代浏览器，您现在可以让所有元素浮动并使用更酷的 CSS 获得相同的效果。使用“宽度：计算（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/

于 2014-01-16T15:10:27.353 回答
0

your left div should have float left and its pixel width using position relative. Your right div should only have position relative and maybe an overflow hidden. This should fix your problem. No need to use the use the div that clears the float.

于 2011-03-17T07:45:25.853 回答
0

如果你想要正确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

于 2015-04-07T20:03:58.963 回答