容器固定宽度.中心 div 动态宽度.希望左右 div 平均填充剩余宽度

问题描述

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

示例:http://jsfiddle.net/htKje/

<div class="bg"></div><div>Lorem Ipsum</div><div class="bg"></div>
CSS :.container { 宽度:500px;}.bg {背景:#CCC；}

解决方案

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

只需在.container上设置background，给同一个容器text-align:center，使中心列inline-block 并在其上重置 background 和 text-align 就可以了.

演示

HTML:

<div class='c'>booooo 在此处添加删除文本</div>

CSS:

.container {背景:#ccc;文本对齐:居中；}.C {显示:内联块；背景:白色；文本对齐:左；}

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.

Example: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; }

解决方案

If you need the left and right columns just for setting the background, then most probably, you don't even need them at all.

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.

demo

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 动态宽度.希望左右 div 平均填充剩余宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！