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