css - 在一行 HTML 中布局 3 个图像链接

Question

您好，我正在制作一个网站，我需要像上图一样布置一些图片链接。灰色矩形是图像所在位置的占位符，它们的大小相同 (275 x 186)，并且它们之间需要一个边距。我还需要能够添加超过 6 张图片。

我似乎无法让它们正确排列。任何帮助将不胜感激。

Answer 1

实现此目的的一种方法是使用 CSS 的“ float ”属性。以下是我将如何解决这个问题。

1. 创建一个宽度为“275px + border-size”x 3 的 div
2. 在此 div 中添加所有尺寸为 275 x 186 并带有边框的图片
3. 为每个图像分配 css 属性“float:left”。

<

style>
    div.wrapper{
    width: ("275 + YOUR border-size" x 3)px;
     }
    div.image{
    background-image: url(..path to your img);
    float: left
    }
</style>

<div class="wrapper">
    <div class="image"></div>
    <div class="image"></div>
    <div class="image"></div>
    <div class="image"></div>
    ... add all your imgs here
    <div style="clear: both"></div> //need this one here to make the wrapper extend 
</div>