css兄弟元素跟随宽度最长的元素等宽
想要让红色和灰色元素的宽度跟随绿色元素的宽度撑满一致，我们需要用到width: fit-content属性。该属性可以使元素的宽度由其内部内容决定。
但是，如果直接给 .container 元素设置 width: fit-content，滚动条将出现在 body 元素上。我们可以通过在 .container 外部再套一层 div 来解决这个问题。
以下是如何实现这一效果的：
立即学习“前端免费学习笔记（深入）”；
html结构：
<div class="wrap">
<div class="container">
<div class="item1">item1</div>
<div class="item2">item2</div>
<div class="item3">item3</div>
</div>
</div>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 元素上。
以上就是如何让 CSS 兄弟元素跟随最长元素等宽，并控制滚动条位置？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
697
收藏
