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

html-css021

关于CSS图文混排列表的问题,第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:0padding:0list-style:none}

.list dl dt{float:left}

.list dl dd{float:left}

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

图在左边。文字右边。下面是源代码：

<title>南天门永远的橘子</title>

<style type="text/css">

<!--

.orange{

width:300px}

.picadd{

float:left

width:80px

}

-->

</style></head>

<body>

<div class="orange">

<div class="picadd"><img src="" width="77" height="20" alt="" /></div>

南天门永远的橘子。在这里写下了很多很多的字。南天门永远的橘子。在这里写下了很多很多的字。南天门永远的橘子。在这里写下了很多很多的字。南天门永远的橘子。在这里写下了很多很多的字。南天门永远的橘子。在这里写下了很多很多的字。南天门永远的橘子。在这里写下了很多很多的字。。在这里写下了很多很多的字。南天门永远的橘子。在这里写下了很多很多的字。南天门永远的橘子。在这里写下了很多很多的字。南天门永远的橘子。在这里

</div>

</body>

</html>