如上圖，是項目中經常會碰到的情況，采用浮動布局，因為文本內容是不可控制的所以導致外層元素（藍色）高度不一致，結果第三個元素沒有如希望的那樣出現在第一個元素下面，最終出現這種參差不齊的效果界面。
以上問題的解決辦法，可以給文本固定高度，超出出現省略號，或者還可以使用js計算三個外層容器高度並取最大值重新賦值給這三個元素。
下面介紹另一個方法： 使用inline-block
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <style> * { margin: 0; padding: 0; } .outer { font-size: 0; width: 800px; margin: 100px auto; border: 5px solid red; } .outer div { font-size: 16px; width: 48%; padding: 1%; display: inline-block;
*display:inline;
*zoom:1; margin: 0; vertical-align: top;
outline: } </style> </head> <body> <div class="outer"> <div>【傑克·斯派洛】幾經輾轉最終成為黑珍珠號的船長，有着獨特的魅力和時而幽默時而認真的性格。亦正亦邪，不講究個人衛生。有人認為他是最偉大的海盜，也有人認為他是最奸惡的海盜。史派羅最愛的黑珍珠號被封印在玻璃瓶里，自己也一直霉運纏身。然而他還要面對更可怕的考驗：亡靈死敵薩拉查船長要追殺他，他必須用盡各種計謀保住自己的命。</div> <div>【薩拉查船長】人稱“海上屠夫”，是令人畏懼的“沉默瑪麗號”船長。一直想干掉傑克船長，在得知三叉戟能夠消滅傑克之后，不遠萬里和風險要弄到三叉戟，勢必要為兄弟報仇雪恨！他帶領着可怕的亡靈船員毫不留情地清理加勒比海域的海盜。他總是留下一個活口，將可怕的傳說傳播出去。</div> <div>【卡瑞娜·史密斯】天文學家，卡琳娜聰慧而堅毅，年紀輕輕便精通數學和天文學，更有與其學識和品質相匹配的美貌。她的武器不是刀劍，而是一本伽利略的日記，是她未曾謀面的父親留給她的。這本日記上有關於星星的記載，將帶領她找到最大的寶藏——擁有該寶藏，就擁有控制整個海洋的力量。</div> <div>【赫克托·巴博薩】與傑克是死敵，原先是他的大副，后背叛了他。在外也鼎鼎有名，在第四部中，擊敗了臭名昭著的海盜黑胡子，並且統治了他的船：安妮女王復仇號。和傑克有和好的趨勢。巴波薩十分精明，擅長以小博大，是交易高手，同時也是擊劍高手。現在他與十分危險的一方結盟，共同出發尋找海神的三叉戟。</div> </div> </body> </html>
效果圖：
注意看，第二個容器相對而言高度較小，但第三四個都正常顯示。
這里有幾個關鍵點。①. 最外層容器font-size設置為0，目的是去除inline-block元素間默認間距；②. 內層元素設置display：inline-block，同時重置font-size，並且設置vertical-align:top向上對齊；③. 還可以加上對IE6/7的兼容： “ *display:inline;*zoom:1;”。