How do I make all floating child elements equal to the longest child elements after clearing floats?

problem description

The

structure is div > ul > li*3
the longest li stretches out the parent element after using double pseudo elements to clear the float, as shown in figure

but not pretty. How to make all child elements equal to the longest

the environmental background of the problems and what methods you have tried

div, ul, li do not set height, attempt to set height:100% for ul and li has no effect

related codes

/ / Please paste the code text below (do not replace the code with pictures)

what result do you expect? What is the error message actually seen?

ask if there is any way

Css
Mar.28,2021

first of all, the flex layout is easy to implement.
I think the landlord wants to ask how to implement a lower version of the browser.
you can use padding-bottom:9999px;margin-bottom:-9999px; to achieve the effect of alignment
implement
https://codepen.io/xboxyan/pe.

http://jsbin.com/sapuxon/1/ed.

Pure css implementation, not optimized, to see if it meets your requirements

flex layout? 

<div class="box">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>
/*  */
.box {display: flex;flex-flow: row nowrap;align-items: stretch;background-color: lightyellow;}
.child {flex: 0 0 100px;font-size: 14px;line-height: 30px;color: green;padding: 10px;margin: 20px;background-color: greenyellow;}
.child:nth-child(2) {flex: 1 1 auto;}

Previous: The height of iview cannot be full after it is introduced into sider.

Next: [expess4] File upload, large files are automatically disconnected and unresponsive

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu