自定义对齐多张图片

Question

我是 CSS 的新手，我正在做一个学校项目。我似乎无法对齐图像。这应该是这样的：

这是我在 Photoshop 上做的布局，我正在做的是裁剪图像并将它们导入我的 html 文件。我现在正在导入两张图片，但无法对齐其中的两张图片：

这是我的 HTML 代码：

    <a href=""><img src="Zotac_1.png" class="gpu"></a>
    <a href=""><img src="webcam.png" class="webcam"></a>

这是我的 CSS:

.gpu {
margin-top: 10px;
float: left;
}

.webcam {
float: left;
margin: 10px 0px 0px 10px;
}

抱歉久了post

Answer 1

这可以通过 CSS Property Clear 来完成。 class 中的示例可能如下所示。

.gpu {
    margin-top: 10px;
    float: left;
    height:150px;
    width:150px;
    clear:both;
}

要更好地了解如何使用 clear，请查看 here and see this JSFiddle 示例。

编辑附加示例

查看问题中的图像，您可能会想要使用容器。这可以通过将几张图片包装在 div 中然后浮动图像和 div 来完成。看看这个JSFiddle Example

JSFiddle 中的代码生成如下所示的输出。

注意：如果您没有使用 1920x1080 监视器，您可能需要调整 JSFiddle 运行 区域的大小，使其看起来像所需的输出

编辑 2

为了修复你的 JSFiddle，我只是浮动了所有 divs 并在左侧添加了一个边距以将它们分开。这是我使用的代码。

.imgs, .leftImgs, .centerImgs, .rightImgs {
  float: left;
  margin-left: 10px;
}

注意：如果您定位 .imgs class 只需使用以下代码。

.leftImgs, .centerImgs, .rightImgs {
  float: left;
  margin-left: 10px;
}