如何让兄弟元素等宽，跟随最长元素的宽度变化？

如何让兄弟元素等宽，跟随最长元素的宽度？

CSS 中常见的设计需求是让兄弟元素自动匹配最长元素的宽度。这通常需要使用一些巧妙的技巧来解决。

要实现指定需求，可以通过如下方法：

1. 父容器设置为 flexbox：将兄弟元素的父容器设置成 flexbox 布局，并设置 flex-direction 为 row。
2. 设置宽度为 fit-content：给父容器设置 width: fit-content，它会自动调整宽度以容纳子元素。
3. 额外包装一层：在父容器外部再包一层 div，避免滚动条出现在 body 元素上。

以下示例代码演示了如何实现：

<div class="wrap">
  <div class="container">
    <div class="item1">item1</div>
    <div class="item2">item2</div>
    <div class="item3">item3</div>
  </div>
</div>

登录后复制

.wrap {
  width: 100%;
  overflow-x: auto;
}

.container {
  width: fit-content;
  display: flex;
  flex-direction: row;
}

.item1 {
  background: red;
}

.item2 {
  background: gray;
}

.item3 {
  min-width: 1300px;
  background: greenyellow;
}

登录后复制

这种方法可以有效地使兄弟元素等宽，并随着最长元素的宽度变化而变化。

以上就是如何让兄弟元素等宽，跟随最长元素的宽度变化？的详细内容，更多请关注米云其它相关文章！