我想让三个跳水运动员并排在一起。左边的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/

10-10 18:49
查看更多