html切图教程里的问题，我用<img>插入图片后右侧有空白

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="style/reset.css"/> <link rel="stylesheet" type="text/css" href="style/common.css"/> <link rel="stylesheet" type="text/css" href="style/index.css"/></head><body> <div class="public-header"> <div class="public-container clearfloat"> <div class="header-logo"><a href="#"></a></div> <ul class="header-nav clearfloat"> <li class="item"><a href="#">Our Story</a></li> <li class="item"><a href="#">Menu</a></li> <li class="item"><a href="#">Reservations</a></li> <li class="item"><a href="#">News</a></li> <li class="item"><a href="#">Rviews</a></li> </ul> </div> </div> <div class="index-banner"> <div class="index-banner-bg"><img src="image/banner.jpg" alt="banner"></div> <div class="index-banner-text"> <div class="index-banner-text-logo"></div> <p class="index-banner-text-text"> <i class="line line-l"></i> resto restaurant home page website template <i class="line line-r"></i> </p> </div> </div> <div class="public-container index-list"></div> <div class="public-container index-panel"> <div class="index-panel-header">FEATURES DISHES</div> </div> <div class="public-container index-panel"> <div class="index-panel-header">THE GALLERY</div> </div> <div class="public-footer clearfloat"> <div class="public-container"> <div class="footer-logo1"><a href="#"></a></div> <div class="footer-logo2"><a href="#"></a></div> <div class="footer-nav"> <ul class="footer-nav-list"> <li class="footer-nav-list-item"><a href="#">New York Restaurant</a></li> <li class="footer-nav-list-item"><a href="#">3926 Anmoore Road</a></li> <li class="footer-nav-list-item"><a href="#">New York,NY 10014</a></li> <li class="footer-nav-list-item"><a href="#">718-749-1714</a></li> </ul> <ul class="footer-nav-list"> <li class="footer-nav-list-item"><a href="#">France Restaurant</a></li> <li class="footer-nav-list-item"><a href="#">68,rue de la Couronne</a></li> <li class="footer-nav-list-item"><a href="#">75002 PARIS</a></li> <li class="footer-nav-list-item"><a href="#">02.94.23.69.56</a></li> </ul> <ul class="footer-nav-list"> <li class="footer-nav-list-item"><a href="#">Blog</a></li> <li class="footer-nav-list-item"><a href="#">Careers</a></li> <li class="footer-nav-list-item"><a href="#">Privacy Policy</a></li> <li class="footer-nav-list-item"><a href="#">Contact</a></li> </ul> </div> </div> </div></body></html>commom.css:.public-header{ height: 110px; background: #fff; }.public-header .header-logo{ float: left; width: 182px; height: 54px; background: url("../image/index-header-logo.png") no-repeat top left; margin-top: 40px;}.public-header .header-logo a{ width: 182px; height: 54px;}.public-header .header-nav{ float: right; text-align: center;}.public-header .header-nav .item{ display: inline-block; line-height: 110px; margin-left: 50px; font-weight: bold; font-size: 14px; color: #5e5e5e;}.public-header .header-nav .item a{ color: #5e5e5e;}.public-container{ position: relative; margin: 0 auto; width: 1100px;}.public-footer{ height: 318px; background: #3b3b3b;}.public-footer .footer-logo1{ float: right; background: url("../image/1.png") no-repeat; width: 182px; height: 55px; margin-right: 28px; margin-top: 82px;}.public-footer .footer-logo2{ float: right; background: url("../image/2.png") no-repeat; width: 200px; height: 58px; margin-right: -190px; margin-top: 150px; }.footer-nav{ float: left; margin-top: 100px;}.footer-nav .footer-nav-list{ display: inline-block; margin-right: 106px;}.footer-nav .footer-nav-list a{ color: #fff; font-size: 16px; line-height: 30px;}index.css.index-banner{ position: relative; background: #b3b3b3; text-align: center; }.index-banner-bg{ height: 570px; width: 1500px; /*margin: 0 auto;*/ overflow: hidden; }.index-banner-text{ position: absolute; top: 200px; left: 50%; margin-left: -388px;}.index-banner-text-logo{ width: 778px; height: 280px; background: url("../image/3.png") no-repeat;}.index-banner-text-text{}

html切图教程里的问题，我用<img>插入图片后右侧有空白

3回答