html css容器没法左对齐 如何强制左对齐？

问题遇到的现象和发生背景

html css容器没法左对齐 如何强制左对齐，该模块的总体宽度为580px。实现如图效果。

img

问题相关代码，请勿粘贴截图
<!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">主编推荐&nbsp;最全的图书、最低的价格尽在叮当网</li>
            <li class="centertopullitwo"><a href="#">详情&gt;&gt;</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;
}
我想要达到的结果

img

是因为centerimg设置了浮动，你删除掉浮动看看

小伙子一看就是新手，现在都是用flex，float早过时了，帮你改进了一下

    .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;
            display: flex;
    }
    .centertopclass ul li{
        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{
        width: 580px;
    }