css兄弟元素跟随宽度最长的元素等宽？

作者站长头像
站长
· 阅读数 10

红色跟灰色的元素宽度需要跟随绿色元素的宽度撑满一致，如下：css兄弟元素跟随宽度最长的元素等宽？现有代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .container{
        width: 100%;
        overflow-x: auto;
    }
    .item1{
        background: red;
    }
    .item2{
        background: gray;
    }
    .item3{
        min-width: 1300px;
        background: greenyellow;
    }
</style>
<body>
    <div class="container">
        <div class="item1">item1</div>
        <div class="item2">item2</div>
        <div class="item3">item3</div>
    </div>
</body>
</html>

请教各路大神最简便方法

回复
1个回答
avatar
test
2024-07-01

其实很简单啦，给 .container 元素设置 width: fit-content 就好了。但是滚动条就会出现在 body 元素上。所以可以在 .container 外部再套一层 div 就好了。

以下是代码结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .wrap { 
        width: 100%;
        overflow-x: auto;
    }
    .container{
        width: fit-content;
    }
    .item1{
        background: red;
    }
    .item2{
        background: gray;
    }
    .item3{
        min-width: 1300px;
        background: greenyellow;
    }
</style>
<body>
    <div class="wrap">
        <div class="container">
            <div class="item1">item1</div>
            <div class="item2">item2</div>
            <div class="item3">item3</div>
        </div>
    </div>
</body>
</html>
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容