
css兄弟元素跟随宽度最长的元素等宽
想要让红色和灰色元素的宽度跟随绿色元素的宽度撑满一致,我们需要用到width: fit-content属性。该属性可以使元素的宽度由其内部内容决定。
但是,如果直接给 .container 元素设置 width: fit-content,滚动条将出现在 body 元素上。我们可以通过在 .container 外部再套一层 div 来解决这个问题。
以下是如何实现这一效果的:
立即学习“前端免费学习笔记(深入)”;
html结构:
item1item2item3
css样式:
.wrap {
width: 100%;
overflow-x: auto;
}
.container {
width: fit-content;
}
.item1 {
background: red;
}
.item2 {
background: gray;
}
.item3 {
min-width: 1300px;
background: greenyellow;
}这样,红色和灰色元素的宽度就会随着绿色元素的宽度而自动调整,并且滚动条会出现在 .wrap 元素上,而不是 body 元素上。










