css div layout,CSS布局 - 动态宽度DIV(CSS Layout - Dynamic width DIV)

我有我传统上使用一个表来解决，但希望得到它与CSS做了一些建议一个很常见的布局问题。 我有3个图像妆容一个“容器”。 左，右图像通常只是用标签显示，中心图像显示为“背景图片”我的内容了，所以，内容似乎是在容器中。我相信你已经看到了/用这个一万次：

Content goes here...

关于这样做的好处是，表格的宽度是始终浏览器(或父母)，中间一栏，其中的内容是动态的尺寸占用左/右图像之间的剩余空间的宽度。

我想是重新创建使用CSS，以尽可能少的硬编码信息。 因此，像这样：

Content goes here...

这个伟大的工程接受中间格，我要如何设置宽度？ 现在，我可以硬编码它是说，92％等，但要我要为它自动填充的空间。 它可以只用CSS来实现？

Answer 1:

尝试

Content Goes Here

要么

Content Goes Here

Answer 2:

这将做你想做的。 固定两侧50像素宽，与内容填充剩余的区域。

Left Side

Right Side

Content Goes Here

Answer 3:

或者，如果你知道这两个“面”上的图像的宽度和不想处理花车：

Content goes here...

CSS：

.container {

position:relative;

padding-left:50px;

padding-right:50px;

}

.container .left-panel {

width: 50px;

position:absolute;

left:0px;

top:0px;

}

.container .right-panel {

width: 50px;

position:absolute;

right:0px;

top:0px;

}

.container .center-panel {

background: url('mymiddleimage');

}

笔记：

位置：相对父DIV是用来做绝对定位的儿童本身相对于该节点的位置。

Answer 4:

使与移动装置支持一dynamycal宽度

http://www.codeography.com/2011/06/14/dynamic-fixed-width-layout-with-css.html

文章来源: CSS Layout - Dynamic width DIV