display: table
屬性和相關屬性(如display: table-cell
)在IE 8以後版本以及Firefox和Chrome/Safari的所有版本中都受到支持。
參考:http://caniuse.com/#feat=css-table
我相信這是你的情況的路要走。
HTML
<div class="container">
<div class="inner_container">
<div class="left_box">
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="middle">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
<div class="right_static">Hi!</div>
</div>
CSS
.container {
position: relative;
width: 500px;
border: 1px solid #000;
overflow: auto;
}
.right_static {
position: absolute;
top: 0px;
right: 0px;
width: 100px;
background-color: green;
}
.inner_container {
display: table;
width: 400px;
overflow: auto;
}
.left_box {
display: table-cell;
background-color: red;
}
.middle {
display: table-cell;
background-color: #9999FF;
}
DEMO
http://jsfiddle.net/nd7qj/
順便說一句,你在你的問題中提到,最左邊的div應該具有靈活的寬度,但是在你提供的CSS中它具有固定的寬度。所以我沒有在我的代碼中使用寬度。