почему мое изображение div не плавает влево

-2

Мне нужны все изображения div to float 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 –

Вы должны сделать свой вопрос ясно. Вы хотите удалить пробелы между изображениями? если так удалить «margin-left» из '.book1'. Если его подпасть под, вы можете поместить 'height' вашего' parent div' в 'auto', поэтому он только расширяется до высоты своего' child' –

, я хочу, чтобы мой порядок изображения выглядел так: 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 не плавает влево

ответ

Смежные вопросы