Question

我有4张照片，上面有我的字幕。我希望图像在页面上一个接一个。 e.g。

Image

Image

Image

Image

问题是，现在，它是并排的两张照片，它们下方的间隙和另外两张并排的照片。 E.g。

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个类似于'蝙蝠侠'但有不同图像的块。

谢谢！

Answer 1

将以下内容替换为整个 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%;
    }

在页面垂直向下显示标题叠加图像

1 个答案: