#html #css
#HTML #CSS
Вопрос:
Я нашел этот код в Интернете о галерее изображений, но когда я пишу заголовок, содержащий более 1 строки текста, изображение, которое находится выше под текстом, уходит далеко, и я не понимаю, почему ?
Вот скриншот проблемы, которую я получаю : 
вот мой код :
.item{ margin-left: 25px; width:200px; text-align:center; display:block; background-color: transparent; border: 1px solid transparent; margin-right: 10px; margin-bottom: 1px; float:left; padding-bottom: 80px; } img { border-radius: 15px; } #index-gallery{ position: relative; top: -160px; margin-left: auto; margin-right: auto; width: 50%; } lt;div id="index-gallery"gt; lt;h2gt;NOS TESTSlt;/h2gt; lt;div class="item"gt; lt;img src="http://movingimages.files.wordpress.com/2009/10/earth-simulator-offers-peaks-into-our-planetary-future.jpg?w=780" alt=""/gt; lt;p id="photo"gt;Forza 5 guide pour les nulslt;/pgt; lt;/divgt; lt;div class="item"gt; lt;img src="http://movingimages.files.wordpress.com/2009/10/earth-simulator-offers-peaks-into-our-planetary-future.jpg?w=780" alt=""/gt; lt;p id="photo"gt;My Caption herelt;/pgt; lt;/divgt; lt;div class="item"gt; lt;img src="http://movingimages.files.wordpress.com/2009/10/earth-simulator-offers-peaks-into-our-planetary-future.jpg?w=780" alt=""/gt; lt;p id="photo"gt;My Caption herelt;/pgt; lt;/divgt; lt;div class="item"gt; lt;img src="http://movingimages.files.wordpress.com/2009/10/earth-simulator-offers-peaks-into-our-planetary-future.jpg?w=780" alt=""/gt; lt;p id="photo"gt;My Caption herelt;/pgt; lt;/divgt; lt;div class="item"gt; lt;img src="http://movingimages.files.wordpress.com/2009/10/earth-simulator-offers-peaks-into-our-planetary-future.jpg?w=780" alt=""/gt; lt;p id="photo"gt;My Caption herelt;/pgt; lt;/divgt; lt;div class="item"gt; lt;img src="http://movingimages.files.wordpress.com/2009/10/earth-simulator-offers-peaks-into-our-planetary-future.jpg?w=780" alt=""/gt; lt;p id="photo"gt;My Caption herelt;/pgt; lt;/divgt; lt;div class="item"gt; lt;img src="http://movingimages.files.wordpress.com/2009/10/earth-simulator-offers-peaks-into-our-planetary-future.jpg?w=780" alt=""/gt; lt;p id="photo"gt;My Caption herelt;/pgt; lt;/divgt; lt;div class="item"gt; lt;img src="http://movingimages.files.wordpress.com/2009/10/earth-simulator-offers-peaks-into-our-planetary-future.jpg?w=780" alt=""/gt; lt;p id="photo"gt;My Caption herelt;/pgt; lt;/divgt; lt;/divgt; Заранее спасибо за вашу помощь !
Ответ №1:
Лучший способ решить эту проблему-установить высоту div контейнера изображения.
.item{ margin-left: 25px; width:200px; text-align:center; display:block; background-color: transparent; border: 1px solid transparent; margin-right: 10px; margin-bottom: 1px; float:left; height: 335px; }