自定义对齐多个图像

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;
}

对不起，很长的帖子

Answer 1

可以使用CSS Property Clear完成此操作。你班上的一个例子可能是这样的。

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

要更好地了解如何使用clear外观here，请参阅此JSFiddle作为示例。

使用其他示例进行编辑

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

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

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

修改2

为了修复你的JSFiddle我只是浮动所有的div并在左边添加一个边距来分隔它们。这是我使用的代码。

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

注意：如果您定位.imgs课程，请改用以下代码。

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