CSS设置，图片均匀排列。

可能从标题，不知道我要说什么意思。

那么习惯性的，贴张图，再对这张图解释一下：

上面就是个简单的demo， 红色正方形的相当于是个问号，对前面的文字进行解释的。

 

之前这种设置都是将红色方框编程块级元素，然后定位，后来发现这种做法很愚蠢，增加了直接的工作量，而且父元素中的position:relative给自己带来的兼容性问题，有时很不容易排查。

 

当我把鼠标放在红色区域时，显示对这个内容的解释。上面的例子是经常在使用中的一种布局，所以特意写出来，"填坑"吧。

 

<style>
    .dm {
        padding:5px;
        width:120px;
        font-size:14px;
        line-height: 1.5em;
        background: #f4f4f4;
    }
    .dm div{display: inline-block;*display: inline;*zoom:1;width:20px;height: 20px;vertical-align:middle;background: red;position: relative;cursor:pointer;}
    .dm div span {position: absolute;bottom:24px;font-size: 12px;line-height: 12px;padding:5px;width:260px;background: beige;color:#777;box-shadow: 0 0 3px rgba(3,3,3,0.3);border-radius:5px;display:none;}
    .dm div span.lt {
        left:20px;
    }
    .dm div:hover span{display: block;}
</style>
<div class="dm">
    セクター単位/インテリジェントバックアップ<div><span class="lt">前者はすべてのセクターをバックアップしますが、後者は使用されたセクターのみバックアップします。</span></div>
</div>

上面的做法，无论我的内容如何变化，都能保证元素在适当的位置显示，而不是用定位的方法，如果内容变化了，这个布局也就打乱了。

这是内容增加后的效果：

总结自己以前的不足，让自己迈前一步。

转载于:https://www.cnblogs.com/Zell-Dinch/articles/4760664.html