Question

我有两个div包含文本，我希望彼此相邻显示（如表格单元格）。但如果父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

您可以通过将两个div的显示设置为table-cell而不是inline-block来执行此操作：

＆＃13;

var uniquePairs = list.ToLookup( p => Tuple.Create(Math.Min(p.Book1.Id, p.Book2.Id), Math.Max(p.Book1.Id, p.Book2.Id)) ).Select( g => g.First() ).ToList();

＆＃13;

强制内联块元素不要换行（相对于彼此）

1 个答案: