extjs的panel怎么自适应高度_小bug：一句代码解决因多行列表高度不同而错位问题...

先看bug是什么

如上图是一个一行两个的列表，箭头所指的位置其实还有文字没有显示完就被隐藏掉了。

客户的要求是让字显示完，别隐藏！

分析问题

我们看看代码是什么原因造成文字显示不完呢？

看到CSS里面写了高度和overflow超出隐藏。

是不是高度去掉就不隐藏了，没错，我们去掉看看！

去掉后的确文字显示完整了，但是下面怎么错位了？

企业价值观为什么不在左边了，怎么跑右边了？

客户说: 这可不行呀，文字显示全了也要对齐呀！

这就是css神奇的地方，你解决一个问题，会出现第二个，第三个问题。

所以解决问题一定分析周全，确保万无一失。

问题分析

所以这个问题我们要解决的是？

1. 文字自适应高度，不能写死高度显示字符显示

2. 还要能对齐，高度不统一怎么对齐

列表造成错位的原因是因为float:left; 元素都左浮动，

如果第一行元素高度太高，第二行的元素就过不去了，被卡住了。

那怎么办呢？

既然问题出在浮动，那是不是不浮动不就解决了？

答对了一半！

问题解决

经过我的深入分析。

我加了一行代码完美解决这个问题！

先看看效果！

如上图，文字显示完整了，第二行也对齐了。

我们文字加多点看看效果如何：

哇，文字这么多也不错位了，高度真的自适应了！

完美解决！

怎么实现的呢？

解决方法

在第三个元素上面的li上，也就是在下一行的第一个元素上面 加一行CSS：

.ul-list li:nth-child(3){ clear:both; }

解决了！

选择性的不浮动！

如果你的列表内容非常多，可以选择每一行的第一个

.ul-list li:nth-child(2n+1){ clear:both; }

响应式的时候可以这样写，每行从3个变2个的时候

@media only screen and (max-width: 750px){    /* 750以下的时候显示两个 */    .ul-list li{width: 50%;}  .ul-list li:nth-child(3n+1){    clear:none;  }    .ul-list li:nth-child(2n+1){    clear:left;  }}

你学会了吗?