考虑以下 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
元素的宽度后剩余的空间?
最佳答案
您可以使用 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.
.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>
关于html - 将两个 div 并排放置,当两个 div 的宽度未知时,这应该填满空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45592624/