HTML CSS examples for CSS Widget:UL Element
Same height for all the <li> list
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> ul {<!-- w w w . j av a2s.c om--> list-style:none; margin:0 auto; width:100%; } li { float:left; width:251px; margin:21px 0; } h3 { font-size:25px; color:Chartreuse; text-align:center; margin:6px 0 0 0; padding:0; } h4 { text-align:center; display:block; font-size:17px; padding:0 11px; margin-top:9px; color:yellow; } .dashed-box { border:3px dashed blue; width:141px; height:141px; line-height:141px; text-align:center; margin-left:auto; margin-right:auto; display:block; } .list { display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap; } .list__item { display:-webkit-flex; display:-ms-flexbox; display:flex; } </style> </head> <body> <ul class="list"> <li class="list_item"> <div class="dashed-box"></div> <h3>Lorem i</h3> <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper molestie lacus sed fermentum. Aliquam erat volutpat. Vestibulum tortor n</h4> </li> <li class="list_item"> <div class="dashed-box"></div> <h3>Lorem i</h3> <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper mol</h4> </li> <li class="list_item"> <div class="dashed-box"></div> <h3>Lorem i</h3> <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper molestie lacus sed fermentum. Aliqu</h4> </li> <li class="list_item"> <div class="dashed-box"></div> <h3>Lorem i</h3> <h4>Lorem ipsum dolor sit amet, consectetur adip</h4> </li> <li class="list_item"> <div class="dashed-box"></div> <h3>Lorem i</h3> <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper molestie lacus</h4> </li> <li class="list_item"> <div class="dashed-box"></div> <h3>Lorem i</h3> <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper molestie lacus sed fermentum</h4> </li> </ul> </body> </html>