容器固定宽度。中心div动态宽度。想要左右div来平均填充剩余宽度

时间:2012-09-18 09:32:59

标签: css html dynamic autofill

有三列。所有三个的组合宽度都是固定的。第二个(中心)列将有动态内容..我需要左右列来平均填充剩余空间(容器宽度 - 中心列动态宽度)。

实施例: http://jsfiddle.net/htKje/

<div class="container">
   <div class="bg"></div>
   <div>Lorem Ipsum</div>
   <div class="bg"></div>
</div>

CSS :
.container { width:500px; }
.bg {backgrould:#CCC; }

1 个答案:

答案 0 :(得分:0)

如果您需要左右列来设置背景,那么很可能,您根本不需要它们。

只需在background上设置.container,提供相同的容器text-align: center,制作中心列inline-block并重置background和{{1在它上面就可以了。

demo

<强> HTML

text-align

<强> CSS

<div class='container'>
    <div class='c'>booooo add remove text here</div>
</div>