动态调整两个外部列到中心列的可变宽度
我认为自己是一个中级/高级CSS/HTML编码器,但我对如何做以下场景感到困惑.我开始认为这是不可能的,但我真的很想相信它是..
假设包装宽度为1000px.
其中有三列.两个外部列的宽度相同,宽度由中心列决定.中间列是唯一一个有内容的列,只有一行文本,两边有30px的填充.因此,如果内容行是带填充的100px,那么其他两列将是(1000-100)/ 2.
是否有动态方法让两个外部列调整到中心列的变化宽度,该中心列由其变化的内容(一行文本)定义？
我想要完成的图形:
好的 ole 表可以拯救：
实际上我认为表格是魔鬼，但这就像你所描述的那样。所以这里它display: table-cell在子 div 上使用，因此使用更好的标记在功能上是相同的：
中心元素确实可以具有动态宽度；为了防止内容被压扁，我只是在包含文本的内容white-space: nowrap中添加了一个。p
我还确认该解决方案除了 Chrome 之外，还适用于 IE8 和 FF。