鍍金池/ 問答/HTML/ css 換行后如何讓父元素的寬度自適應(yīng)子元素的寬度。

css 換行后如何讓父元素的寬度自適應(yīng)子元素的寬度。

橙色的是父元素，粉色的是內(nèi)置的子元素
窗口足夠大，一行的時候是這樣的
clipboard.png
改變窗口的大小 掉行的時候是這樣的
clipboard.png

希望能實現(xiàn)這樣的效果
clipboard.png

代碼如下

<head>
    <style type="text/css">
        .box{
            display: inline-block;
            background-color: orange;
        }
        .card{
            width: 200px;
            height: 200px;
            margin: 10px;
            background-color: pink;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
    </div>
</body>
請大神們幫忙想想解決方案！display:inline-block 或者 flex：wrap 效果都跟上述一致。
回答
編輯回答
哚蕾咪

card如果是inline就可以

2017年5月1日 21:44
編輯回答
孤影

“換行之后讓父元素的寬度適應(yīng)子元素的寬度”這一想法我認為是不合理的。
應(yīng)該讓子元素去適應(yīng)父元素的寬，一行五個，則寬為20%，一行四個，則為25%...
然后再利用box-sizing,margin等調(diào)整出比較美觀的界面。

2017年11月30日 06:14
編輯回答
涼汐

請問你解決了嗎？同求解決方案

2017年11月10日 22:01