拆分两个表格单元之间的剩余空间

我需要有一个div，动态宽度居中，两侧各有一个div占用剩余空间。拆分两个表格单元之间的剩余空间

| fill remaining space | dynamically sized | fill remaining space |

我需要动态调整div换行如果文本太长，无法在同一行，而不是其他。

HTML：

<div class="container"> 
    <div class="side"></div> 
    <div class="content">This text should not wrap unless it is too long to fit on one line</div> 
    <div class="side"></div> 
</div>

我能实现使用display: inline-flex;如下（小提琴here）所需的行为。

.container { 
    display: inline-flex; 
    width: 100%; 
} 
.side { 
    flex-grow: 1; 
    min-width: 20px; 
} 
.content { 
}

不过，我更愿意用display: table;兼容性的原因，我不能完全得到它的工作。到目前为止，我的尝试如下（小提琴here）。

.container { 
    display: table; 
    width: 100%; 
} 
.side { 
    display: table-cell; 
    width: 50%; 
} 
.content { 
    display: table-cell; 
}

正如您所看到的，content单元格的宽度将成为最长单词的宽度。我无法使用white-space: nowrap;，因为即使内容太长而无法放在一行上，它也不会换行。

有什么办法可以使用display: table;得到这个工作吗？我也很乐意尝试其他合理兼容的东西。

更新我需要content列占用尽可能小的空间，因此在这里不起作用。

来源

2015-05-13 zelanix

您可能想要尝试在.container上设置。您还需要将.side元素的宽度减少到25％，因为您有两个元素，而不是一个元素。看看this updated fiddle。

table-layout:fixed将使流体柱占据固定宽度柱留下的空间。查看Chris Coyier的documentation和this article！

来源

2015-05-13 09:18:22

感谢您的回答，但在这种情况下，内容列不再动态调整文本大小。 – zelanix

即，如果我有短文本，我不想要一个保证金（除了在CSS中指定的）。 – zelanix

是的，使用'table-layout：fixed'时，.content行只填充两个元素之间的间隙。我现在不知道如何实现你的目标，抱歉。 –

拆分两个表格单元之间的剩余空间

回答

相关问题