html - 如何对齐两个相邻的 div，一个包裹文本，另一个填充其余部分？

Question

如何在 CSS 中实现以下目标:

右边的 div 应该有一个宽度取决于文本 (wrap_content)。

左侧的 div 应填充剩余空间(宽度 = 100% - 右侧的 div)。

(假设右边的 div 的最大宽度为 50px，对于较小的文本，它应该包裹文本)

Answer 1

您可以 float 右 列，并通过 overflow-x: hidden; 隐藏left 列的水平溢出； ，如下:

.right {
  max-width: 50px;
  float: right;
}

.left { overflow-x: hidden; }

<div class="right">Text</div>
<div class="left"> ... </div>

WORKING DEMO .