強制內聯塊元素不包裹（相對於彼此）

Question

我有兩個div s包含文本，我想要顯示彼此相鄰（如表格單元格）。但是，如果父母div不夠寬，它們會出現在彼此之下。

我想要什麼：

+------------------+------------------+ 
|     | Some Long text | 
| Some short text | Some Long text | 
|     | Some Long text | 
+------------------+------------------+ 

我能得到什麼：

+------------------+ 
|     | 
| Some short text | 
|     | 
+------------------+---------------------------+ 
| Some Long text Some Long text Some Long text | 
+----------------------------------------------+ 

如果我強迫第二div的寬度，我得到我想要的結果，但我想它拿所有剩餘的寬度。我怎樣才能做到這一點 ？

<div style="width: 300px; border: solid 1px;"> 
 
    <div style="vertical-align: middle; display: inline-block; background-color: cyan;"> 
 
    Some short text 
 
    </div> 
 
    <!-- if I set 'width: 150px' below, I get what I want --> 
 
    <div style="vertical-align: middle; display: inline-block; background-color: green;"> 
 
    Some long text. Some long text. Some long text. 
 
    </div> 
 
</div>

Answer 1

您可以通過兩種申報單的顯示設置爲表單元格，而不是inline-block的做到這一點：

<div style="width: 300px; border: solid 1px;"> 
 
    <div style="vertical-align: middle; display: table-cell; background-color: cyan;"> 
 
    Some short text 
 
    </div> 
 
    <!-- if I set 'width: 150px' below, I get what I want --> 
 
    <div style="vertical-align: middle; display: table-cell; background-color: green;"> 
 
    Some long text. Some long text. Some long text. 
 
    </div> 
 
</div>