爲什麼我的div圖像不能左浮動

-2

我需要所有圖像div浮動left。看看我的picture，我該如何刪除那個可用空間。爲什麼我的div圖像不能左浮動

這個我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;  
}

來源

2016-12-21 K.Monkey

https://s30.postimg.org/92an2r0i9/sus.jpg –

你需要讓你的問題清楚。你想刪除圖像之間的空間嗎？如果是的話從'.book1'中刪除'margin-left'。如果它的空間在下面，你可以將'parent div'的'height'設置爲'auto'，這樣它只能擴展到它的子''的高度 –

我的意思是，希望我的圖像順序像這樣https：// s29 .postimg.org/4gm3vp0ef/sus2.jpg但是當我改變分辨率的響應總是有一些圖像之間的大自由空間https://s29.postimg.org/dzhywrhnr/sus3.jpg –

問題是與你的形象：他們不是大小完全相同。您可以將它們編輯爲具有相同的寬高比，或者您可以指定包含它們的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>

來源

2016-12-21 08:19:36 ab29007

爲什麼我的div圖像不能左浮動

回答

相關問題