Question

我正在使用css / html并试图获得一个＆＃34;数组＆＃34;不同的图像并排相似：

在css文件中：

#header_index   {background:#FFFFFF url('image1.jpg') repeat-x 10px 10px; padding:20px; height:240px; }

在html文件中：

<div id="header_index"></div>

将image1.jpg水平并排。

我想要的是拥有相同的外观，但有多个图像。

如何获得＆＃34;数组＆＃34;或任何图像，以便它的image1.jpgimage2.jpgimage3.jpg完全没有边框。我尝试使用表和div但无法摆脱边框，此外我想尝试使用我已经使用的相同方法（在css文件中指定图像）。

感谢。

Answer 1

假设您想要每行4张图片。因此，将有4列，每列将占据宽度的25％。

<div class="col-1-4"></div>
<div class="col-1-4"></div>
<div class="col-1-4"></div>
<div class="col-1-4"></div>

让我们在css中设置宽度并将div浮动到左侧，这样它们就不在文档的流中。

.col-1-4{
  width:25%;
  float:left;
}

现在，我们将在每个div中添加一个图像。这是一个例子div。

<div class="col-1-4">
  <img src="(PUT URL OF IMAGEHERE)"/>
</div>

如您所知，图像大于div。因此，让我们约束所有图像的宽度以适应列div。

img{
  max-width:100%;
}

Answer 2

简单示例：

div { display: inline-block; }

这将使所有容器并排呈现。如果你添加一个类，那就更好了：

<div class="image" id="image1"></div>
<div class="image" id="image2"></div>

.image { display: inline-block; }

Answer 3

我不会在CSS中加载这样的图像，除非它们确实是背景图像。如果您需要它们作为背景图像，您可以使用下面相同的代码，但是您必须使用背景位置＆＃39;用于在容器内移动图像的属性。

我会将img或container元素设置为inline-block。如果您使用容器，则无论实际图像大小如何，都可以通过“裁剪”来使图像占用相同的空间。容器内的图像。将容器设置为overflow：hidden，并显示：inline-block。确保将img元素设置为display：block。然后只列出每个图像里面的容器。

div {
    display: inline-block;
    /* crops images */
    overflow: hidden;
    width: 100px;
    height: 100px;
    /* makes abs positioned images stay inside container */
    position: relative;
}

div img {
    display: block;
    position: absolute;
    /* center the image */
    left: 50%;
    height: 50%
}

如果您不想使用相对/绝对定位，您可以设置具有负边距的图像的位置，但我更喜欢rel / abs定位。

如何使用css / html并排显示一组图像

3 个答案: