html - 将两个 div 并排放置，当两个 div 的宽度未知时，这应该填满空间

Question

考虑以下 HTML 标记:

 <div class='wrapper'>
    <div class='left'> Text text text </div>
    <div class='right'>
         <button></button>
    </div>
 </div>

假设按钮的宽度可变(因为按钮上显示的文本)。是否可以在纯 css 中将 .left 和 .right div 彼此相邻放置，并且 .left div 应该占用计算完 button 元素的宽度后剩余的空间？

Answer 1

您可以使用 flexbox .

flex: <positive-number>

Makes the flex item flexible and sets the flex basis to zero, resulting in an item that receives the specified proportion of the free space in the flex container. If all items in the flex container use this pattern, their sizes will be proportional to the specified flex factor.Equivalent to flex: 1 0.

Source

.wrapper {
  display: flex;
}

.left {
  flex: 1 1;
}

<div class='wrapper'>
  <div class='left'> Text text text </div>
  <div class='right'>
    <button>button</button>
  </div>
</div>