跳转到主内容
websoft网络软件专家 - 深耕网络技术,打造实用软件!

如何使用 CSS 实现兄弟元素宽度跟随最长的一个?

css如何实现兄弟元素宽度跟随最长的一个 问题描述 在html页面中,存在三个水平 排列 的div元素,分别为红色、灰色和绿色背景。要求红色和灰色元素的宽度自动跟随绿色元素的宽度,并撑满它们的父容器。现有代码如下:
item1
item2
item3
解决方案 立即学习 “ 前端免费学习笔记(深入) ”; 使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件 如果你了解HTML,CSS和JavaScript,您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造,可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序,然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流,并开始构建应用程序,提供更 下载 可以使用 fit-content 属性来解决此问题。给父容器 container 添加width: fit-content property,即可实现兄弟元素宽度跟随最长的一个。 代码实现
item1
item2
item3
.wrap { width: 100%; overflow-x: auto; } .container { width: fit-content; } .item1 { background: red; } .item2 { background: gray; } .item3 { min-width: 1300px; background: greenyellow; }
注意事项 使用 fit-content 可能会导致滚动条出现在父容器中,因此建议在 container 外部再套一层 wrap 元素,并设置 overflow -x: auto 属性。

相关文章