如何让父盒子的宽度等于子盒子占有宽度之和?

比方说下面这段代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
        .b1{
            display: flex;
            border: 1px solid #000;
            flex-direction:column;
        }
        .b2{
            width: 30px;
            height: 30px;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <div class="b1">
        <div class="b2"></div>
        <div class="b2"></div>
    </div>
</body>
</html>

效果是这样的,外层div宽度占满了一行:
图片描述

注意:我的要求是父盒子不定宽,子盒子定宽。

阅读 5.5k
3 个回答

刚刚试了下display:inline-block,可以实现。

新手上路,请多包涵

display: inline-flex;
inline-flex:将对象作为内联块级弹性伸缩盒显示

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题