一个固定宽度div和两个变量

时间:2014-04-10 14:04:44

标签: html css

我想让三个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是我用过的小提琴。

3 个答案:

答案 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: tablewidth: 100%

#left, #middle, #right {
    display: table-cell;
}
#container {
    display: table;
    width: 100%;
}

即使空间很小,我也要强制#left元素保持宽度,我建议同时添加min-width: 200px {}。{s}} CSS。

演示:http://jsfiddle.net/eMbV7/11/

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

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/