我想让三个div在彼此旁边排成一列。左边div有一个固定的宽度,中间有一个百分比宽度,第三个应该占用剩余的空间。这是我提出的代码:
HTML:
<div id="left">Left</div>
<div id="middle">Middle</div>
<div id="right">Right</div>
CSS:
#left {
float:left;
width:200px;
height:100px;
background-color:#A00;
opacity:0.3;
}
#middle {
float:left;
width:55%;
height:100px;
background-color:#0A0;
opacity:0.3;
}
#right {
background-color:#CCC;
height:40px;
}
我已经使两个左边的div透明,所以你可以看到右边div的背景一直延伸到页面的左边。我怎样才能解决这个问题?我试过浮动正确的div,但它没有填补剩下的空间。 here是我用过的小提琴。
答案 0 :(得分:2)
最简单的解决方案是将3个div
元素包装在容器中,如下所示:
<div id="container">
<div id="left">Left</div>
<div id="middle">Middle</div>
<div id="right">Right</div>
</div>
然后只创建子元素display: table-cell
和父元素display: table
和width: 100%
。
#left, #middle, #right {
display: table-cell;
}
#container {
display: table;
width: 100%;
}
即使空间很小,我也要强制#left
元素保持宽度,我建议同时添加min-width: 200px
{}。{s}} CSS。
答案 1 :(得分:1)
使用此代码,我已将所有div包装在容器div中。
<div class="container">
<div id="left">Left</div>
<div id="middle">Middle</div>
<div id="right">Right</div>
</div>
&安培; CSS
.container{
display:block;
padding:0 0 0 200px;
}
#left {
float:left;
width:200px;
height:100px;
background-color:#A00;
opacity:0.3;
margin:0 0 0 -200px;
}
#middle {
float:left;
width:55%;
height:100px;
background-color:#0A0;
opacity:0.3;
}
#right {
float : right;
width: 45%;
background-color:#CCC;
height:40px;
}
这是jsFiddle链接DEMO
答案 2 :(得分:0)
S.B。提供了一个很好的答案,但这里只是为了好玩而另一种方法。您可以将所有内容display:block;
设置为正常,然后float:left;
,并使用calc()
获取最终列的宽度。它只是100%
- 55%
- 200px
,或压缩,45% - 200px
。
这样做的好处是您不需要拥有#container
。潜在问题是浏览器支持,主要是移动浏览器。请参阅:http://caniuse.com/calc
<div id="left">Left</div>
<div id="middle">Middle</div>
<div id="right">Right</div>
#container {
width: 100%;
}
#left {
float:left;
width:200px;
height:100px;
background-color:#A00;
opacity:0.3;
}
#middle {
float:left;
width:55%;
height:100px;
background-color:#0A0;
opacity:0.3;
}
#right {
float:left;
background-color:#CCC;
height:100px;
width:calc(45% - 200px);
}