比如，我们需要实现一个类似表单的样式，采用bootstrap的栅格系统，使用col-md-4，每行分成3等分，如下图：
第一“坑”；文字内容高度变化增大时，下面的会覆盖掉
就如上面的案例，然而当某一等分的子元素内容增多，由于宽度固定了，内容会一直往下撑大，但是随之问题来了，下一行的元素被覆盖，这种效果明显不是我们所想要的。
第二“坑”：文字内容高度变化增大时，下一行的内容并非在新的一行开始
这种效果就更奇葩了，然而当某一等分的子元素内容增多，由于宽度固定了，内容会一直往下撑大，但是随之问题来了，下一行的元素虽然没有被覆盖，但是并不是从第一个位置开始，而是紧接着高度变化的元素下方开始，这种也不是我们想要的效果。
分析：
为啥会出现这些奇葩的“特效”呢？通过查看css样式我们会发现，bootstrap框架底层实现3等分的原理是采用了width:33.33%; float:left; 。看到这2个样式有没有一种恍然大悟的感觉，没错，就是因为浮动的原因引起的。浮动元素脱离了文档流就不会有高度，子元素高度变大并不会撑开父元素的高度，所以就会覆盖下一行的元素的内容。而所有元素都是左浮动，所以自然是靠左对齐，当某个元素高度变大了，那么后面的元素浮动就只能贴着它开始排列。
改进方案：
既然我们知道问题出现在浮动，那么解决起来就简单。
1 使用伪元素清除浮动（推荐）
给父级元素设置清除浮动，使用伪元素：after或者：before
2 不使用浮动，自定义css样式（推荐）
给 col-md-4 这个 class 自定义css 样式：
float:none; display:inline-block / inline-table / inline-flex;
3 保持样式不变，改html结构（不建议使用）
每行用一个 row 容器包裹3个等分，这个实现起来不好操作，因为数据是动态返回来的，需要循环遍历，也不方便维护
4 js 动态计算子元素的高度，把最大的赋值给父元素（不推荐）
因为浮动的元素高度没了，那么通过js也可以动态设置，这种方法需要遍历，影响性能
var maxH = 0;
$('.col-md-4').each(function (index,ele) {
if($(ele).children().height() >maxH){
maxH = $(ele).children().height();
$(this).css('height',maxH+'px')
}
maxH = 0;
})
以上给出4种解决方案，当然还会有其他方案我没想到的，推荐使用第一第二种，操作简易，维护也方便。
网友评论