Question

我可以在垂直方向上居中放置两个第一张图像，但是接下来的两张图像必须彼此相邻并与顶部对齐。 http://www.ojosperuanos.com/marquez/ 应该看起来像这样：http://www.ojosperuanos.com/marquez/img/example.jpg

尝试过float：left但禁用对齐尝试过的表格，但在图像之间创建了空间

我希望图像之间没有空格，因此看起来好像是一张照片。另外，请您期望居中，并使其在所有移动设备中都可以100％容纳。

Answer 1

在代码中：

对于班级：

.content-3和.content-4

更改属性：显示：块；至显示：内联广告块

并删除浮动样式

这是codepen：

[Link to CodePen][1]

Answer 2

按以下方式更改 HTML （将 content3 div 和 content4 div 放在 center-divs 内）：

<!DOCTYPE html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Poller&iacute;a el Marquez</title>
</head>

<body>
    <section class="intro">
        <div class="inner">
            <div class="content1">
                <img src="http://www.ojosperuanos.com/marquez/img/lptop.jpg">
            </div>
            <div class="content2">
                <img src="http://www.ojosperuanos.com/marquez/img/lpbtm.jpg">
            </div>
            <div class="center-items">
                <div class="content3">
                    <a href="#" style="text-decoration:none">
                        <img src="http://www.ojosperuanos.com/marquez/img/tlf1.jpg">
                    </a>
                </div>
                <div class="content4">
                    <a href="#" style="text-decoration:none">
                        <img src="http://www.ojosperuanos.com/marquez/img/tlf2.jpg">
                    </a>
                </div>
            </div>
        </div>
    </section>
</body>

这是 content3 和 content4 的修改过的CSS类，以及新添加的 center-items 类：

.content3 {
    max-width: 100%;
    text-align: center;
    margin: 0 auto;
    padding: 0px;
    font-size: 0px;
    display: inline;
}

.content4 {
    max-width: 100%;
    margin: 0;
    text-align: center;
    font-size: 0px;
    padding: 0px;
    display: inline;
}

.center-items{
    width: 100%;
}

如何垂直对齐1张顶部2张底部的图片

2 个答案: