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

发布时间：2020-12-14 16:42:45 所属栏目：资源来源：网络整理

导读：我认为自己是一个中级/高级CSS / HTML编码器,但我对如何做以下情况感到困惑..我开始认为这是不可能的,但我真的很想相信它是.. 假设包装宽度为1000px. 其中有三列.两个外部列的宽度相同,宽度由中心列决定.中间列是唯一一个有内容的列,只有一行文本,两边有30px

我认为自己是一个中级/高级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.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!