如何在清除浮動(dòng)后使所有浮動(dòng)子元素等長(zhǎng)于最長(zhǎng)子元素？

問(wèn)題描述

結(jié)構(gòu)是div>ul>li*3
使用雙偽元素清除浮動(dòng)后最長(zhǎng)的li撐開(kāi)了父元素，如圖
圖片描述
但是不好看。如何才能讓所有子元素都等于最長(zhǎng)的那個(gè)

問(wèn)題出現(xiàn)的環(huán)境背景及自己嘗試過(guò)哪些方法

div、ul、li都沒(méi)有設(shè)置height，嘗試給ul、li設(shè)置height：100%也沒(méi)有效果

你期待的結(jié)果是什么？實(shí)際看到的錯(cuò)誤信息又是什么？

請(qǐng)教有什么方法

回答

編輯回答

墨小白

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

純 css 實(shí)現(xiàn), 未經(jīng)優(yōu)化, 看看是否滿足你的要求

2017年5月13日 19:43

編輯回答

綰青絲

flex布局？

2018年9月15日 13:13

編輯回答

祈歡

首先，flex布局很容易實(shí)現(xiàn)。
我想樓主應(yīng)該是想問(wèn)低版本瀏覽器如何實(shí)現(xiàn)吧。
可以使用padding-bottom:9999px;margin-bottom:-9999px;這種來(lái)實(shí)現(xiàn)對(duì)齊的效果
具體實(shí)現(xiàn)
https://codepen.io/xboxyan/pe...

2017年8月8日 07:53

編輯回答

柒喵

<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;}

2018年7月2日 04:24