拆分兩個表格單元之間的剩餘空間

我需要有一個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行只填充兩個元素之間的間隙。我現在不知道如何實現你的目標，抱歉。 –

拆分兩個表格單元之間的剩餘空間

回答

相關問題