动态调整两个外侧列到中心列的可变宽度 [英] Dynamically adjusting two outside columns to the variable width of the center column

问题描述

我会认为自己是一个中级/高级的CSS / HTML编码器，但我很抱歉如何做下面的情况..我开始认为这是不可能的，但我真的想相信它是..

I would consider myself to be an intermediate/advanced CSS/HTML coder but I'm stumped on how to do the following scenario.. I'm starting to think it is impossible but I really want to believe it is..

假设包装宽度为1000px。

Let's say the wrapper width is 1000px.

其中有三列。两个外侧列的宽度相同，该宽度由中心列决定。中间列是唯一一个有内容的，只有一行文本，在任一侧有30px的填充。因此，如果内容行为100px，带有填充，则其他两列将为（1000-100）/ 2。

Within it is three columns. The two outside columns are the same width, this width is decided by the center column. The center column is the only one with content, just one line of text with 30px of padding on either side. So if the line of content is 100px with padding, than the other two columns would be (1000-100)/2 each..

是否有动态方式两个外侧列调整为由其变化内容定义的中心列的变化宽度，一行文本？

Is there a dynamic way to have the two outside columns adjust to the varying width of the center column that is defined by its varying contents, one line of text?

我想要完成的图形：

推荐答案

很好的解决方案：

http://jsfiddle.net/hgwdT/

其实我认为表是魔鬼，但这个工作，你描述。所以这里是使用 display：table-cell 对子div，所以它的功能是相同的使用更好的标记：

Actually I think tables are the devil, but this works as you described. And so here it is using display: table-cell on the child divs, so it is functionally the same using nicer markup:

http://jsfiddle.net/XXXdB/

中心元素确实可以具有动态宽度;为了防止内容被挤压，我只需在包含文本的 p 中添加 white-space：nowrap

The center element can indeed have a dynamic width; to prevent the content from being squished, I simply added a white-space: nowrap to the p containing the text.

我还确认此解决方案适用于IE和FF，以及Chrome。

I also confirmed that this solution works in IE8 and FF, in addition to Chrome.

这篇关于动态调整两个外侧列到中心列的可变宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！