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

Question

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

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

Answer 1

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

1. 创建一个宽度为“275px + 边框大小”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>