html - 自定义 CSS 库

Question

我想为我的一个元素创建一个照片库，但我无法实现。我想要的是这样的:

我不知道会有多少张照片，但基本上它的作用是: - 在 photo_div #1 中插入第一张照片 - 在#2 中插入 2nd - 转到新行 - 在#3 中插入​​第 3 个 - 在#4 中插入第 4 个 - 转到下一列和第一行 - 在#5 中插入第 5 个 - 等

到目前为止我所做的是以下代码:

<div id="scroll_container">
  <div id="photo_0" class="div_photo">
    <!-- More content inside -->
  </div>
</div>

CSS 代码:

scroll_container{
  height:100%;
  width:550px;
  overflow-x:scroll;
  overflow-y:hidden;
}

.div_photo{
  float:left;
  width:250px;
  height:250px;
  border:1px solid black;
  margin:0 5px 5px 0;
  position:relative;
  display:inline-block;
}

但我所能实现的只是一个两列的 3 行画廊。

你能帮我解决这个问题吗？

谢谢

Answer 1

看起来您的图片总是大小相同，您的问题只是您想要的特殊订单。

在那种情况下，这可能是一个解决方案:

.test {
    width: 40px;
    height: 40px;
    border: solid 1px blue;
    float: left;
    margin: 2px;
}

.test:nth-child(4n+3) 
{
    border-color: red;
    position: relative;
    top: 44px;
    left: -92px;
    margin-right: -44px;
}

.test:nth-child(4n+4) 
{
    border-color: red;
    position: relative;
    top: 44px;
    left: -46px;
    margin-right: -44px;
}

fiddle

想法是 float 前 2 个元素，即 5 和 6，依此类推。第 3 和第 4(以及第 7 和第 8)相对定位以将它们带到特殊位置