如何让兄弟元素跟随最宽元素等宽
问题：
HTML 代码如下，需要让红色和灰色元素的宽度跟随绿色元素，保持一致：
<div class="item1">item1</div> <div class="item2">item2</div> <div class="item3">item3</div>
现有的 CSS 样式：
.item1 {
background: red;
}
.item2 {
background: gray;
}
.item3 {
min-width: 1300px;
background: greenyellow;
}解答：
可以使用 width: fit-content 来让 container 元素的内容根据内容实际大小进行调整。但此时滚动条会出现在 body 元素上。
解决方案是在 container 元素外层再套一层 wrap 元素，然后让 wrap 元素具有水平滚动条：
<body>
<div class="wrap">
<div class="container">
<div class="item1">item1</div>
<div class="item2">item2</div>
<div class="item3">item3</div>
</div>
</div>
</body>.wrap {
width: 100%;
overflow-x: auto;
}
.container {
width: fit-content;
}
.item1 {
background: red;
}
.item2 {
background: gray;
}
.item3 {
min-width: 1300px;
background: greenyellow;
}如此一来，紅色和灰色元素的寬度就會自動跟隨綠色元素的寬度，保持一致，且滚动条会出现在 wrap 元素上。
以上就是如何让兄弟元素跟随最宽元素等宽？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
604
收藏
