我想让三个跳水运动员并排在一起。左边的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是我用过的小提琴。
最佳答案
S.B.提供了一个很好的答案,但这里有一个替代方法只是为了好玩。您可以让所有的display:block;
都像normal一样,然后使用float:left;
来获得最后一列的宽度。它只是calc()
-100%
-55%
或压缩的,200px
。
这样做的好处是您不需要使用45% - 200px
。潜在的问题是浏览器支持,主要是移动浏览器。见:http://caniuse.com/calc
HTML格式:
<div id="left">Left</div>
<div id="middle">Middle</div>
<div id="right">Right</div>
CSS:
#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);
}
演示:http://jsfiddle.net/eMbV7/9/
关于html - 一个固定宽度的div和两个可变的,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/22990360/