Изображения с надписью наложения сверху вниз по странице

У меня есть 4 фотографии, на которых я накладывал надписи. Я хочу, чтобы изображения были один за другим на странице. , например.Изображения с надписью наложения сверху вниз по странице

Image 

Image 

Image 

Image

Проблема, прямо сейчас, это 2 фото застрял бок о бок, зазор под ними и еще 2 фотографии застрял бок о бок. Например.

ImageImage 

ImageImage

Я думаю, что это может быть мой CSS, но я не могу понять, какая из них вызывает это.

Вот мой код:

CSS:

div.image { 
float: left; 
position: relative; 
} 

div.descript { 
position: absolute; 
bottom: 0px; 
left: 0px; 
width: 100%; 
background:rgba(0, 0, 0, 0.6); 
font-size:24px; 
color: white; 
} 

p.content { 
padding:10px; 
margin:0; 
} 

.image .center { 
display: inline-block; 
vertical-align: middle; 
height: 100%; 
}

HTML:

<style> 
img { 
display:block; 
margin-left: auto; 
margin-right: auto; 
} 
</style> 
</head> 
<body> 

<div class='image'> 
<div class="center"></div> 
<img src="images/batman.jpg" alt="HTML5 Icon" style="width:576px;height:365px;"> 
<div class='descript'> 
    <p class='content'> Batman </p> 
</div>

Там больше 3 блоков похожих на 'Бэтмена', но с различными изображениями.

Спасибо!

источник

2015-08-12 Jasmine Li

Напор никому застрял на этом. Figcaption полезна. CSS очень похож на тот, который опубликовал один из полифонов Неофита. –

Заменить весь CSS с следующие:

div.image { 
    display: block; 
    } 

div.descript { 
    position: relative; 
    bottom: 0px; 
    left: 0px; 
    width: 576px; 
    background:rgba(0, 0, 0, 0.75); 
    font-size:24px; 
    color: white; 
    margin-top: -50px; 
    } 

p.content { 
    padding:10px; 
    margin:0; 
    } 

.image .center { 
    display: inline-block; 
    vertical-align: middle; 
    height: 100%; 
    width: 100%; 
    }

источник

2015-08-12 06:46:57

Привет! Спасибо, что ответили так быстро! Я на самом деле пробовал это раньше, и это все тот же неправильный макет ... –

удалите позицию: абсолютную как от вашего изображения, так и от дескрипторов, проверьте эту ссылку, он выглядит отлично на моем экране https://jsfiddle.net/h0eu0edd/ 2/ –

Привет, я также использовал дисплей: встроенный блок на JSFiddle, и оказалось, что мне нужен макет, но кто-то, когда я запускаю его в Chrome, не работает. Аналогичным образом, когда я удалил позиции, изображения остались в том же месте, но заголовок наложения стал серым EDIT: И мне нужны позиции для надписей для наложения в нижней части изображения –

Изображения с надписью наложения сверху вниз по странице

ответ

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