登录
首页 >  文章 >  前端

如何使用 fit-content 实现兄弟元素等宽并避免出现滚动条?

时间:2024-11-10 10:34:04 389浏览 收藏

哈喽!今天心血来潮给大家带来了《如何使用 fit-content 实现兄弟元素等宽并避免出现滚动条? 》,想必大家应该对文章都不陌生吧,那么阅读本文就都不会很困难,以下内容主要涉及到,若是你正在学习文章,千万别错过这篇文章~希望能帮助到你!

如何使用 fit-content 实现兄弟元素等宽并避免出现滚动条?

利用 fit-content 实现兄弟元素等宽

在页面中,我们希望红色和灰色元素的宽度跟随绿色元素的宽度一致。以下是实现这一效果的方法:

在包含兄弟元素的容器元素上设置 width: fit-content。这将使容器仅适应其子元素的宽度。

.container {
  width: fit-content;
}

然而,这样会导致滚动条出现在 body 元素中。为了解决这个问题,可以在 container 元素外部再套一层 div 元素。

<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;
}

这样就可以在保持兄弟元素等宽的同时,避免滚动条出现在不合适的地方。

以上就是《如何使用 fit-content 实现兄弟元素等宽并避免出现滚动条? 》的详细内容,更多关于的资料请关注golang学习网公众号!

相关阅读
更多>
最新阅读
更多>
课程推荐
更多>