容器修正宽度。中心div动态宽度。想要左右divs平均填充剩余宽度 [英] Container fix width. Center div dynamic width. want left right divs to fill out remaining width equally

问题描述

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

Have Three columns..Combine width of all three is fixed.. 2nd ( center ) column will have dynamic content.. I need left and right column to fill out remaining space ( container width - center column dynamic width )equally.

示例：
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; }

推荐答案

如果你需要左右列

只需设置背景 c>在 .container 上，给出相同的容器 text-align：center ，使中心列 inline-block 并重新启动后台和 text-align 窍门。

Simply setting the background on the .container, giving the same container text-align: center, making the center column inline-block and reseting the background and text-align on it will do the trick.

演示

HTML ：

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

CSS ：

.container {
    background: #ccc;
    text-align: center;
}
.c {
    display: inline-block;
    background: white;
    text-align: left;
}

这篇关于容器修正宽度。中心div动态宽度。想要左右divs平均填充剩余宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！