私のdivイメージが浮動小数点に浮かぶのはなぜですか？

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の高さを指定することもできます。

はここに例を示します

.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; 
 
}

<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>