强制内联块元素不包裹（相对于彼此）

我有两个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>

来源

2015-11-05 yannick1976

您需要定义宽度或接近最大宽度。如果没有，它会增长直到流量结束。 –

您可以通过两种申报单的显示设置为表单元格，而不是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>

来源

2015-11-05 17:31:42 j08691

强制内联块元素不包裹（相对于彼此）

回答

相关问题