CSS图文混排的几种方案

…

html结构丑陋，但css简单。

….

CSS：

.twit_list dd .twit_item_pic{float:left;width:66px;padding-top:2px;} .twit_list dd .twit_item_content{float:left;width:316px;color:#666;line-height:18px;}

大部分应试者都是这个答案。用了浮动就必须定宽，结构就失去灵活性，同时必须解决浮动带来的一系列问题。

CSS：

.list-figure { float: left; _display: inline; width: 130px; margin-left: -140px; margin-top: 6px; }

这些写法都是欠缺对css基本概念的理解。如果理解block formatting context(块级格式化上下文)的概念， 就不会这么写了。触发了BFC的块级元素，它的边缘不会和float box重叠。

推荐的方案：

CSS：

.item .pic { float:left;margin-right:10px; }

.item .content { overflow:hidden;zoom:1; } /* 或用display:table-cell */

body {

margin: 0;

padding: 1em 0;

background-color: #f3f3f3;

font:16px/1.7 Arial, Helvetica, sans-serif;

color:#5a5a5a

}

a {

color: #08c;

text-decoration: none

}

header h1{

text-align:center

}

ul{margin: 0;padding: 0}

ul li{list-style: none;margin: 0;font-size: 13px;}

h3{line-height: 1.7;margin: 0}

.item .pic { float:left;margin-right:10px; }

.item .content { overflow:hidden;zoom:1; } /* 或用display:table-cell */