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

Question

问题描述

结构是div>ul>li*3
使用双伪元素清除浮动后最长的li撑开了父元素，如图

但是不好看。如何才能让所有子元素都等于最长的那个

问题出现的环境背景及自己尝试过哪些方法

div、ul、li都没有设置height，尝试给ul、li设置height：100%也没有效果

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

你期待的结果是什么？实际看到的错误信息又是什么？

请教有什么方法

Answer 1

首先，flex布局很容易实现。
我想楼主应该是想问低版本浏览器如何实现吧。
可以使用padding-bottom:9999px;margin-bottom:-9999px;这种来实现对齐的效果
具体实现
https://codepen.io/xboxyan/pe...

Answer 2

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

纯 css 实现, 未经优化, 看看是否满足你的要求

Answer 3

flex布局？

Answer 4

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