我們常常會(huì)用到float:left的方式使得div或者li按照行的形式顯示，但是有時(shí)候沒有設(shè)置固定高度，就會(huì)產(chǎn)生由于高度不同而錯(cuò)位的問題。
我用代碼來表示一下：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>li或div高度不同產(chǎn)生錯(cuò)位的解決辦法</title>
<style>
.test{ margin:0; padding:0; list-style:none; width:500px;}
.test li{ padding:5px; min-height:20px; max-height:40px; min-width:40px; max-width:200px; margin:5px; border:1px solid #999; background:#CCC; font-size:12px; margin:5px; vertical-align:top; overflow:hidden; float:left; }
</style>
</style>
</head>
<body>
<ul class="test">
<li>When Brazil needed him most, Neymar, the face of this World Cup</li>
<li>What's happening? And why?</li>
<li>Brazil sneaks nervy win</li>
<li>Where did ISIS come from, and how did they become the world's most dangerous militants?</li>
<li>How the day's action unfolded</li>
<li>Join World Cup chat</li>
</ul>
</body>
</html>
效果如下：
紅色圓圈的部分就是由于第一個(gè)li太高了，導(dǎo)致第三個(gè)li沒有排列到第一個(gè)li的下面，錯(cuò)位了。
那個(gè)該如何解決這個(gè)問題呢？就是不要使用 float:left 的方法，而直接用 display:inline-block 屬性。這個(gè)屬性是在CSS2.1增加的，目前大部分瀏覽器都支持它。表示“行內(nèi)塊元素”。
部分代碼稍微修改一下：
.test li{ padding:5px; min-height:20px; max-height:40px; min-width:40px; max-width:200px; margin:5px; border:1px solid #999; background:#CCC; font-size:12px; margin:5px; vertical-align:top; overflow:hidden; /* float:left; */ display:inline-block; }
見紅色部分
再看效果：
看看這樣子是不是就正常了呢？
如果高度是固定的，是不會(huì)有這個(gè)問題產(chǎn)生的，所以如果高度能夠確定，還是可以繼續(xù)使用float:left的方法。