在很多时候,我们不知道容器的高度是多少,但是我们需要随着他的高度而变化的时候,可以设置display:flex;.
我这里的需求是右侧的文字是后端返回的,不知道他的具体高度,所以左侧的线要随着右侧的文字的高度变化而变化
我得布局大致是这样的 一个大容器里包含,左右两个盒子,左侧是线,右侧是文字
<div class="container">
<div class="line"></div>
<div class="text">这里是文字内容</div>
</div>
我们这里借助display: flex中的align-items: stretch 和 flex-grow: 1 话不多说 上代码
.container {
display: flex;
align-items: stretch;
}
.line {
width: 100%;
height: 1px;
background-color: #000;
flex-shrink: 0;
}
.text {
flex-grow: 1;
padding-left: 10px; /* 根据需要调整左侧内边距 */
}