问题遇到的现象和发生背景
html css容器没法左对齐 如何强制左对齐,该模块的总体宽度为580px。实现如图效果。
问题相关代码,请勿粘贴截图
<!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>操作题2</title>
<meta name="keywords" content="叮当网,图书,电子商务" />
<link rel="stylesheet" type="text/css" href="css/test2.css" />
</head>
<body>
<div class="center_top">
<div class="centertopclass">
<ul>
<li class="centertopullione">主编推荐 最全的图书、最低的价格尽在叮当网</li>
<li class="centertopullitwo"><a href="#">详情>></a></li>
</ul>
<div class="clear"></div>
</div>
<div class="centerimg">
<a href="#"><img src="images/vc.jpg" height="180" width="132" alt="" class="centerbookimg" /></a>
<a href="#" class="booktitle"><h5>Visual C++编程实例精粹</h5></a>
<p class="bookcontents">本书围绕一些关于C#和.NET的重要主题,包括C#语言元素,.NET资源管理、使用C#表达设计、创建二进制组件和使用框架等,讲述了最常见的50个问题的解决方案,为程序员提供了改善C#和.NET程序的方法。本书通过将每个条款构建在之前条款之上,并合理地利用之前的条款,来让读者最大限度地学习书中的内容,为其在不同情况下使用最佳构造提供指导。本书适合各层次的C#程序员阅读,同时可以推荐给高校教师(尤其是软件学院教授C#/.NET课程的老师),作为C#双语教学的参考书...</p>
<p><span class="spanone">定价:¥49元</span>
<span class="spantwo">折扣价:¥38元</span>
<span class="spanthree">折扣:75折</span>
</p>
</div>
</div>
</body>
</html>
.centertop{
margin: 0;
padding: 0;
width: 580px;
}
.centertopclass{
margin: 0;
padding:0;
}
.centertopclass ul{
margin: 0;
padding:0;
list-style-type: none;
font-size: 12px;
}
.centertopclass ul li{
float: left;
font-size: 12px;
}
.centertopullione{
width: 480px;
height: 30px;
background: #fff url(../images/index_arrow.gif) no-repeat left top;
padding: 0 0 0 20px;
color: #c49238;
font-weight: bold;
letter-spacing: 0.1em;
}
.centertopullitwo{
width: 122px;
text-align: right;
}
.centertopullitwo a{
color: #000;
text-decoration: none;
}
.centerbookimg{
float: left;
margin: 10px 10px 10px 0;
border: none;
}
.booktitle{
font-size: 14px;
font-weight: normal;
color: #06329b;
}
.bookcontents{
text-indent: 20px;
line-height: 24px;
font-size: 12px;
}
.spanone,.spantwo,.spanthree{
margin-left: 20px;
font-size: 12px;
}
.spanone{
text-decoration: line-through;
}
.centerimg{
float: left;
width: 580px;
}