Question

HTML

<div class="whole">
  <div class="fst"></div>
  <div class="sec"></div>
  <div class="thd"></div>    
</div>

CSS

.whole {
    width: 100%;
    height: 20px;
}
.whole div {
    height: 20px;
    display: inline-block;
    position: relative;
}
.fst {
    float: left;
    width: 20px;
    background: blue;
}
.sec {
    background: red;
}
.thd {
    float: right;
    width: 20px;
    background: blue;
}

有没有办法拉伸div.sec以适应div.fst和div.thd在任何屏幕尺寸下留下的区域？ div.fst和div.thd的宽度以像素为单位。

有没有只有css的解决方案？

非常感谢您的帮助！

请参阅我的fiddle http://jsfiddle.net/vHHcf/

Answer 1

这似乎就是你想要的。

jsFiddle example

鉴于您说.fst和.thd具有固定宽度，您可以使用calc()从40px中减去100%值。

.sec { width:calc(100% - 40px); }

更新了CSS

.whole {
    width: 100%;
    height: 20px;
}
.whole div {
    height: 20px;
    display: inline-block;
    position: relative;
}
.fst {
    float: left;
    width: 20px;
    background: blue;
}
.sec {
    background: red;
    width:calc(100% - 40px);
}
.thd {
    float: right;
    width: 20px;
    background: blue;
}

拉伸div以适合所有屏幕尺寸的内容

1 个答案: