css图文混排问题
.caselist{width:700px;float:left;color:#000;}.caselistli{float:left;list-style-type:n...
.caselist {width:700px;float:left; color:#000;}
.caselist li {float:left; list-style-type:none; width:335px; padding-top:10px; padding-left:10px;}
.caselist li .img {display:block;float:left; width:335px; height:200px;}
.caselist li .txt {display:block;float:left; width:335px; height:20px; line-height:20px; padding-top:5px; text-align:center;}
.title {width:680px;float:left; padding-left:10px; height:20px;
line-height:20px; margin-top:5px;}
.title dt{ float:left; font-weight:bold;}
.title dd{ float:right;}
我想要的是图片的那种效果....但不知道怎么回事老是出问题... 展开
.caselist li {float:left; list-style-type:none; width:335px; padding-top:10px; padding-left:10px;}
.caselist li .img {display:block;float:left; width:335px; height:200px;}
.caselist li .txt {display:block;float:left; width:335px; height:20px; line-height:20px; padding-top:5px; text-align:center;}
.title {width:680px;float:left; padding-left:10px; height:20px;
line-height:20px; margin-top:5px;}
.title dt{ float:left; font-weight:bold;}
.title dd{ float:right;}
我想要的是图片的那种效果....但不知道怎么回事老是出问题... 展开
2个回答
展开全部
根据你的样式，在不改变你的初衷的情况下，帮你优化了一下代码，运行一下即可：
（其中，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/html; charset=utf-8" />
<title>zhidao</title>
<style type="text/css">
<!--
*{ margin:0; padding:0;}
body{ background:#d5d2cb; font:12px/1.5 Arial, Helvetica, sans-serif;}
img{ border:0 none;}
.zhidao{ width:700px;}
.caselist{ list-style:none; padding:0 4px; width:692px;}
.caselist li{ float:left; padding:0px 8px; text-align:center; width:330px;}
.caselist li a{ color:#000; text-decoration:none;}
.title{ float:left; padding:10px; width:670px;}
.title dt{ color:#665f4f; float:left; font-weight:bold;}
.title dd{ float:right;}
.title dd a{ color:#665f4f; text-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>
========================可爱的分隔线=========================
至于楼主在一楼的追问中提到的清除浮动：clear:left;clear:right;它是清除左、右浮动，
我们可以用clear:both;来代替，clear:both;等同于clear:left;和clear:right;
（其中，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/html; charset=utf-8" />
<title>zhidao</title>
<style type="text/css">
<!--
*{ margin:0; padding:0;}
body{ background:#d5d2cb; font:12px/1.5 Arial, Helvetica, sans-serif;}
img{ border:0 none;}
.zhidao{ width:700px;}
.caselist{ list-style:none; padding:0 4px; width:692px;}
.caselist li{ float:left; padding:0px 8px; text-align:center; width:330px;}
.caselist li a{ color:#000; text-decoration:none;}
.title{ float:left; padding:10px; width:670px;}
.title dt{ color:#665f4f; float:left; font-weight:bold;}
.title dd{ float:right;}
.title dd a{ color:#665f4f; text-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>
========================可爱的分隔线=========================
至于楼主在一楼的追问中提到的清除浮动：clear:left;clear:right;它是清除左、右浮动，
我们可以用clear:both;来代替，clear:both;等同于clear:left;和clear:right;
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
/* 最外层套一个div把这一部分内容包起来 */
.content{ width:700px;}
.caselist {width:700px;color:#000;}
.caselist:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}
.caselist li {float:left; list-style-type:none; width:335px; padding-top:10px; padding-left:10px;}
.caselist li .img {display:block;width:335px;height:200px;}
.caselist li .txt {display:block;width:335px;height:20px;line-height:20px;padding-top:5px; text-align:center;}
.title {width:680px;padding-left:10px;height:20px;line-height:20px;margin-top:5px;}
.title:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}
.title dt{float:left;font-weight:bold;}
.title dd{float:right;}
不要用那么多的左浮动、有很多左浮动都是没用的、
重点：用完浮动后记得清除浮动、这样布局才不会乱掉……
.content{ width:700px;}
.caselist {width:700px;color:#000;}
.caselist:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}
.caselist li {float:left; list-style-type:none; width:335px; padding-top:10px; padding-left:10px;}
.caselist li .img {display:block;width:335px;height:200px;}
.caselist li .txt {display:block;width:335px;height:20px;line-height:20px;padding-top:5px; text-align:center;}
.title {width:680px;padding-left:10px;height:20px;line-height:20px;margin-top:5px;}
.title:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}
.title dt{float:left;font-weight:bold;}
.title dd{float:right;}
不要用那么多的左浮动、有很多左浮动都是没用的、
重点：用完浮动后记得清除浮动、这样布局才不会乱掉……
追问
灰常感谢你的建议...追问下.....请问是清除哦？是需要加一个div里面设置clear:left;clear:right这样子还是其他方法吗？？？
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
