css图文混排问题，求教

html-css07

css图文混排问题，求教,第1张

根据你的样式，在不改变你的初衷的情况下，帮你优化了一下代码，运行一下即可：

（其中，4个图片放在与文件同目录的images文件夹内）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

<title>zhidao</title>

<style type="text/css">

<!--

*{ margin:0padding:0}

body{ background:#d5d2cbfont:12px/1.5 Arial, Helvetica, sans-serif}

img{ border:0 none}

.zhidao{ width:700px}

.caselist{ list-style:nonepadding:0 4pxwidth:692px}

.caselist li{ float:leftpadding:0px 8pxtext-align:centerwidth:330px}

.caselist li a{ color:#000text-decoration:none}

.title{ float:leftpadding:10pxwidth:670px}

.title dt{ color:#665f4ffloat:leftfont-weight:bold}

.title dd{ float:right}

.title dd a{ color:#665f4ftext-decoration:none}

-->

</style>

</head>

<body>

<div class="zhidao">

<dl class="title">

<dt>古的设计－品牌案例－标志设计</dt>

<dd><a href="#">点击查看更多</a></dd>

</dl>

<ul class="caselist">

<li><a href="#"><img src="images/01.jpg" alt="" />标题</a></li>

<li><a href="#"><img src="images/02.jpg" alt="" />标题</a></li>

</ul>

<dl class="title">

<dt>古的设计－品牌案例－标志设计</dt>

<dd><a href="#">点击查看更多</a></dd>

</dl>

<ul class="caselist">

<li><a href="#"><img src="images/03.jpg" alt="" />标题</a></li>

<li><a href="#"><img src="images/04.jpg" alt="" />标题</a></li>

</ul>

</div>

</body>

</html>

<img>标签有align=“”属性~专门控制文字绕图片排列方向。

按照你的图片，代码为：<img src=“图片路径” align=“left” style=“padding:0 10px” />文字内容文字内容文字内容文字内容文字内容文字内容文字内容

可以用两个DIV，浮动float,还可以用表格写，比如：<html>

<head>

<title></title>

</head>

<body>

<table style="border:1px solid red">

<tr><td rowspan="5">插入图片</td><td>右边第一行文字</td></tr>

<tr><td>右边第二行文字</td></tr>

<tr><td>右边第三行文字</td></tr>

<tr><td>右边第四行文字</td></tr>

<tr><td>右边第五行文字</td></tr>

</table>

</body>

</html>