最近業務需要，想設計一個比較通用的圖文混排的列表。結果設計的過程中遇到了不少問題，雖然都是一些css設計中比較基礎的問題，但是自己認為有必要總結下，希望可以幫到一些css設計的初學者，同時也想擴大下自己博客的知識量o(^_^)o。

1.最終設計的結果

?

HTML(部分，后面的li還有被省略了，當然外面的div也是應該關閉的，大家注意。)代碼

復制代碼代碼如下:

景點爆棚

• 浙江66萬游客爭睹海寧潮

  浙江66萬游客爭睹海寧潮浙江66萬游客爭睹海寧潮

  “八月十八潮，壯觀天下無”，非常壯觀的海寧潮引來66.5萬人次的游客。“八月十八潮，壯觀天下無”，非常壯觀的海寧潮引來66.5萬人次的游客。

  [詳細]

  浙江66萬游客爭睹海寧潮

CSS(主要的ul部分)代碼：

復制代碼代碼如下:

@charset utf-8;

/* comm gfixlist*/

.gfixlist{padding-bottom: 20px;}

/* 下面的li中的display:inline;純粹是為了解決IE6下的雙邊距問題 */

.gfixlist li{_display: inline;float: left;margin: 20px 0 0 20px;text-align: center;width: 290px;}

.gfixlist li .pic{float: left;margin-right: 10px;width: 120px;height: 95px;}

.gfixlist li .txt{float: left;width: 160px;height:92px;overflow: hidden;text-align: left;}

.gfixlist li .txt .title{display: block;color: #16387C;font-weight: bold;white-space: nowrap;}

.gfixlist li .txt .title:hover{color: #F60;}

.gfixlist li .txt .more:hover{text-decoration: underline;}

2.float的幾個關鍵問題

經常使用float，但是有幾個關鍵點是必須要說明的。

float一開始是為了實現文本環繞的效果。它與position的絕對定位是有區別的，主要的地方在于，float的元素仍然處于“流”中，而絕對定位脫離了“流”。這樣的影響就是：如果你修改了浮動元素的css，它可能會影響到周圍的元素顯示，而絕對定位的元素修改后不影響周圍元素。

設置了float后元素就變成了塊級元素。浮動的元素始終是塊級元素，即使將樣式修改為display：inline也不會使它的方式發生改變。

float的浮動效果并不一定永遠是合適的，要理解什么時候使用float，什么時候要清除float。其實這個可以從float設計的本質來考慮，它一開始是為了讓周圍的元素環繞自己。所以當你不想讓后面的元素再環繞包圍float元素的時候就要考慮清除float了(解釋了為什么要清除浮動)。

有些時候，我們清除float只是為了避免“潛在”的對其他元素的影響(所以有時候你會發現：有的代碼中去掉清除浮動的代碼，頁面顯示效果也是一樣的)，但是清除浮動絕對是一種很好的習慣。

3.清除浮動的方式

浮動元素后添加清除元素：

這種方法是在外圍div底部添加一個元素，然后給它定義clear：both的樣式。它需要添加額外的html代碼，使用起來不是很方便。

讓外圍元素也浮動：

這種方法是讓外圍的元素也浮動起來，讓它包含所有的浮動元素，但是它需要在后面的元素中添加clear的樣式，還是要添加額外代碼。

使用overflow：hidden：

你可以在外圍元素上添加上這樣的樣式，它會強制讓外圍的元素包含里面的浮動元素。如果你遇到過ul的背景延伸不到里面所有float的li元素的情況，那么你應該對這種使用方法很熟悉了。但是這種方式也有問題，就是如果li有個下拉菜單什么的絕對定位的元素時，它很可能就顯示不出來了，悲劇。。。

“簡單清除法”：

代碼中的.gclearfix類就是使用這樣的方法，具體代碼網上已經介紹很清楚了，如果你還不了解可以去查找更具體的“簡單清除法”的介紹。

雖然它也增加了額外的html，但是非常可靠，可以保證兼容性的清除浮動。所以我推薦你也使用這樣的方法。

4.IE6下的“雙邊距”問題

“雙邊距”問題產生的條件：IE6下，給浮動元素在浮動方向上設置了margin值，并且浮動元素的邊距碰到了外圍塊的邊沿。

以上三個條件缺一不可，前兩個比較好理解，后一個需要注意下，如果浮動元素的前面也有一個相同方向的浮動元素，那么后面的浮動元素是不會觸發“雙邊距”問題的。

IE6下的“雙邊距”現象：

從上圖可以明顯看出最左邊的兩個li的margin-left要明顯大于其他的li。更嚴重的問題，如果每個li是精心設置恰好站好一行的話，那么“雙邊距”可能把有些li“擠到”下面一行去，導致float drop的問題。

解決的辦法也很簡單，只要給float的元素添加一個display：inline的樣式就可以了。

我在上面的css代碼中使用了一個hack(并做了注釋)，只讓IE6來識別，避免”雙邊距“問題，其他瀏覽器不識別這個樣式。

5.總結

代碼中的一部分html的標簽設計的并不是特別好，后續想辦法持續改進吧。特別是在寫樣式表的時候，發現良好的html結構是提高設計css效率的重要方面。

其實這個設計比較簡單，但是自己看看還是有比較多的地方(float、兼容性、標簽語義化等)需要注意，而且越去深挖，越是覺得有必要要mark下，說不定什么時候自己就一不小心掉進”坑“里了。

總結

以上是生活随笔為你收集整理的python 输出结果图文混排_div css图文混排列表设计中的基础问题总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。