本文主要包含图文混排,css图文等相关知识,佚名 希望在学习及工作中可以帮助到您
最近业务需要，想设计一个比较通用的图文混排的列表。结果设计的过程中遇到了不少问题，虽然都是一些css设计中比较基础的问题，但是自己认为有必要总结下，希望可以帮到一些css设计的初学者，同时也想扩大下自己博客的知识量o(^_^)o。
1.最终设计的结果
HTML（部分，后面的li还有被省略了，当然外面的div也是应该关闭的，大家注意。）代码
从上图可以明显看出最左边的两个li的margin-left要明显大于其他的li。更严重的问题，如果每个li是精心设置恰好站好一行的话，那么“双边距”可能把有些li“挤到”下面一行去，导致float drop的问题。
解决的办法也很简单，只要给float的元素添加一个display：inline的样式就可以了。
我在上面的css代码中使用了一个hack（并做了注释），只让IE6来识别，避免”双边距“问题，其他浏览器不识别这个样式。
5.总结
代码中的一部分html的标签设计的并不是特别好，后续想办法持续改进吧。特别是在写样式表的时候，发现良好的html结构是提高设计css效率的重要方面。
其实这个设计比较简单，但是自己看看还是有比较多的地方（float、兼容性、标签语义化等）需要注意，而且越去深挖，越是觉得有必要要mark下，说不定什么时候自己就一不小心掉进”坑“里了。
1.最终设计的结果
HTML（部分，后面的li还有被省略了，当然外面的div也是应该关闭的，大家注意。）代码
从上图可以明显看出最左边的两个li的margin-left要明显大于其他的li。更严重的问题，如果每个li是精心设置恰好站好一行的话，那么“双边距”可能把有些li“挤到”下面一行去，导致float drop的问题。
解决的办法也很简单，只要给float的元素添加一个display：inline的样式就可以了。
我在上面的css代码中使用了一个hack（并做了注释），只让IE6来识别，避免”双边距“问题，其他浏览器不识别这个样式。
5.总结
代码中的一部分html的标签设计的并不是特别好，后续想办法持续改进吧。特别是在写样式表的时候，发现良好的html结构是提高设计css效率的重要方面。
其实这个设计比较简单，但是自己看看还是有比较多的地方（float、兼容性、标签语义化等）需要注意，而且越去深挖，越是觉得有必要要mark下，说不定什么时候自己就一不小心掉进”坑“里了。