登录
首页 >  文章 >  前端

如何让 CSS 中的兄弟元素与宽度最长的元素等宽?

时间:2024-11-10 10:15:44 498浏览 收藏

从现在开始,我们要努力学习啦!今天我给大家带来《如何让 CSS 中的兄弟元素与宽度最长的元素等宽? 》,感兴趣的朋友请继续看下去吧!下文中的内容我们主要会涉及到等等知识点,如果在阅读本文过程中有遇到不清楚的地方,欢迎留言呀!我们一起讨论,一起学习!

如何让 CSS 中的兄弟元素与宽度最长的元素等宽?

如何在 CSS 中使兄弟元素与宽度最长的元素等宽?

遇到如下问题:

现有代码:

.container{
    width: 100%;
    overflow-x: auto;
}
.item1{
    background: red;
}
.item2{
    background: gray;
}
.item3{
    min-width: 1300px;
    background: greenyellow;
}

要求红色和灰色元素自动撑满至绿色元素的宽度。

解决方案:

最便捷的方法,只需给 .container 元素设置 width: fit-content,即可。

但需要注意,这会导致滚动条出现在 body 元素上。所以,可以考虑在外围再套一层 div,即:

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

<!-- ... 其他代码 -->

到这里,我们也就讲完了《如何让 CSS 中的兄弟元素与宽度最长的元素等宽? 》的内容了。个人认为,基础知识的学习和巩固,是为了更好的将其运用到项目中,欢迎关注golang学习网公众号,带你了解更多关于的知识点!

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