Question

关于CSS图文混排列表的问题

怎样以<div id=" " class=" ">
<ul id=" " class=" ">
<li id=" " class=" ">
这样的css样式实现两列多行左图右文的效果？

如果单单全部是文章的列表，这个我懂实现，问题是图片的大小和文章不一样。大家帮下忙，这个问题我想了好久，用很多的div是可以实现，但是用列表怎样可以实现呢？

在此谢谢大家了！！！

Answer 1

遇到这样图文混合的，我是这样来实现的！

代码：

<div class="list">
<dl>
<dt><img src="nr_1.gif" /></dt>
<dd>
<ul>
<li>sdddsd</li>
<li>sdddsd</li>
<li>sdddsd</li>
<li>sdddsd</li>
<li>sdddsd</li>
<li>sdddsd</li>
</ul>
</dd>
</dl>
</div

样式：
dl,dt,dd,ul,li{margin:0;padding:0; list-style:none;}
.list dl dt{float:left;}
.list dl dd{float:left;}

细节上的我就不怎么详细说了！根据你的需要在进行调整！

Answer 2

把你的DIV中的一个加上 float:left就行了，比如在div图片的属那加上 float:left;
试下

Answer 3

为了更语义化一点,你可以用<dl><dt></dt><dd></dd></dl>.<dt>里放图片,<dd>里放文字.对dt和dd的设置都为同向浮动.

Answer 4

你把你的文章列表代码贴出来，包括css,我给你试着改一下