Question

我需要所有图像div才能浮动left。看看我的picture，我该如何删除该空闲空间。

这是我的html代码：

<div class="book_items row">
    <div class="book1"><img src="images/book1.jpg" style="width: 80%;"></div>
    <div class="book1"><img src="images/book2.jpg" style="width: 80%;"></div>
    <div class="book1"><img src="images/book3.jpg" style="width: 80%;"></div>
    <div class="book1"><img src="images/book4.jpg" style="width: 80%;"></div>
    <div class="book1"><img src="images/book5.jpg" style="width: 80%;"></div>
    <div class="book1"><img src="images/book6.jpg" style="width: 80%;"></div>
    <div class="book1"><img src="images/book7.jpg" style="width: 80%;"></div>
    <div class="book1"><img src="images/book8.jpg" style="width: 80%;"></div>
</div>

CSS：

.book1{
    width: 22%;
    text-align: center;
    height: 100%;
    margin-top: 25px;
    margin-left: 20px;
    float: left;    
}

Answer 1

问题出在您的图片上：它们的大小并不相同。你可以编辑它们以获得相同的宽高比，或者你可以指定包含它们的div的高度。

以下是一个例子：

＆＃13;

.book1{
width: 22%;
text-align: center;
height: 160px;
margin-top: 25px;
margin-left: 15px;
float: left; 
overflow:hidden;
}
body,html{
  width:100%;
  margin:0;
  padding:0;
}
.book_items{
width:100%;
margin:0;
  padding:0;
}

＆＃13;

<div class="book_items row">
<div class="book1"><img src="http://img.phombo.com/img1/photocombo/15189/Top_100_Wallpapers_360_X_640_by-85.jpg_Nature_Butterfly.jpg" style="width: 80%;"></div>
<div class="book1"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/71/Attenborough_Nature_Reserve_-_geograph.org.uk_-_202642.jpg/240px-Attenborough_Nature_Reserve_-_geograph.org.uk_-_202642.jpg" style="width: 80%;"></div>
<div class="book1"><img src="http://wiki.openstreetmap.org/w/images/thumb/3/3c/Salto_del_Angel-Canaima-Venezuela08.JPG/240px-Salto_del_Angel-Canaima-Venezuela08.JPG" style="width: 80%;"></div>
<div class="book1"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/71/Attenborough_Nature_Reserve_-_geograph.org.uk_-_202642.jpg/240px-Attenborough_Nature_Reserve_-_geograph.org.uk_-_202642.jpg" style="width: 80%;"></div>
<div class="book1"><img src="http://wiki.openstreetmap.org/w/images/thumb/3/3c/Salto_del_Angel-Canaima-Venezuela08.JPG/240px-Salto_del_Angel-Canaima-Venezuela08.JPG" style="width: 80%;"></div>
<div class="book1"><img src="http://picsmobi.net/uploads/pictures/nature-pictures/64233-beautiful-nature.jpg" style="width: 80%;"></div>
<div class="book1"><img src="http://www.rspb.org.uk/groups/images/loughborough_25032011181306_352.jpg" style="width: 80%;"></div>
</div>

＆＃13;

为什么我的div图像没有浮动

1 个答案: