html – 动态调整两个外部列到中心列的可变宽度

前端之家收集整理的这篇文章主要介绍了html – 动态调整两个外部列到中心列的可变宽度前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我认为自己是一个中级/高级CSS / HTML编码器,但我对如何做以下情况感到困惑..我开始认为这是不可能的,但我真的很想相信它是..

假设包装宽度为1000px.

其中有三列.两个外部列的宽度相同,宽度由中心列决定.中间列是唯一一个有内容的列,只有一行文本,两边有30px的填充.因此,如果内容行是带填充的100px,那么其他两列将是(1000-100)/ 2.

是否有动态方法让两个外部列调整到中心列的变化宽度,该中心列由其变化的内容(一行文本)定义?

我想要完成的图形:

解决方法

拯救的好桌子:

http://jsfiddle.net/hgwdT/

实际上我觉得桌子是魔鬼,但这就像你描述的那样有效.所以这里是使用display:table-cell on the child divs,所以在功能上使用更好的标记是相同的:

http://jsfiddle.net/XXXdB/

中心元素确实可以具有动态宽度;为了防止内容被压扁,我只需在包含文本的p中添加一个白色空格:nowrap.

我还确认,除Chrome之外,此解决方案适用于IE8和FF.

原文链接:https://www.f2er.com/html/226940.html

猜你在找的HTML相关文章