鍍金池/ 問答/HTML/ 如何在清除浮動后使所有浮動子元素等長于最長子元素？

如何在清除浮動后使所有浮動子元素等長于最長子元素？

問題描述

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

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

div、ul、li都沒有設置height，嘗試給ul、li設置height：100%也沒有效果

相關代碼

// 請把代碼文本粘貼到下方（請勿用圖片代替代碼）

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

請教有什么方法

回答
編輯回答
墨小白

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

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

2017年5月13日 19:43
編輯回答
綰青絲

flex布局？

2018年9月15日 13:13
編輯回答
祈歡

首先，flex布局很容易實現(xiàn)。
我想樓主應該是想問低版本瀏覽器如何實現(xiàn)吧。
可以使用padding-bottom:9999px;margin-bottom:-9999px;這種來實現(xiàn)對齊的效果
具體實現(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