How does css realize a parent with a fixed width, an indefinite number of child elements, and how to adapt the width?

for example, if the parent has a div, child element with a fixed width, the url, of an indefinite number of img returned by the API. When a url is returned, the current image fills the entire div,. When two entries are returned, the width of the parent div is evenly divided, and when the number is greater than 3, the side slides are displayed.

Apr.02,2021

Brother, css is not good at dealing with this kind of logic


try flex layout


try the flex layout, and set all the img to flex:1;
html:

.
<div class="flex">
    <img src="-sharp" class="flex1">
    <img src="-sharp" class="flex1">
    <img src="-sharp" class="flex1">
</div>

css:

.flex { display:flex;flex-wrap: wrap; }
.flex1 { flex:1; }
.flex1 + .flex1 { margin-left:10px; } 
.flex img { min-width:100px; }

the compatibility of flex is written by yourself, and that's basically the way of thinking. Of course, if you want to be compatible with earlier versions of ie, you have to use js to dynamically set width or class .


provides a solution that is not CSS, and it is very easy to use the back end to determine.

Menu