How to adapt the width of the parent element to the width of the child element after the css wraps the line.

The

orange is the parent element, and the pink one is the built-in child element
. The
clipboard.png

clipboard.png


clipboard.png

window is large enough for one line.

the code is as follows

<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  
Css
Mar.11,2021
The idea of

"adapting the width of the parent element to the width of the child element after line wrapping" is unreasonable to me.
should let the child elements adapt to the width of the parent element, five in a row, 20% in width, and four in a row, then 25%.
and then use box-sizing,margin to adjust a more beautiful interface.


have you solved it? The parent element style of the same solution


is set as follows: display: grid; grid-template-columns: repeat (auto-fill,180px); justify-content: center; , the child element as a whole can be centered and the interior is adaptive. You can try grid-related


card. If it's inline, you can

.
Menu