Question

我想为我的一个项目创建一个照片库，但我无法实现它。我想要的是这样的：

我不知道会有多少张照片，但基本上它的作用是： - 在photo_div＃1中插入第一张照片 - 在＃2中插入第2个 - 走向新线 - 在＃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

想法是浮动前两个元素，即5和6，依此类推。第3和第4（以及第7和第8）相对于将它们带到特殊位置

Answer 2

这样你就可以编写你的html：

<div id="scroll_container">
  <div id="photo_1" class="div_photo">
    <!-- More content inside -->1
  </div>
     <div id="photo_2" class="div_photo">
    <!-- More content inside -->2
  </div> <div id="photo_3" class="div_photo">
    <!-- More content inside -->3
  </div> <div id="photo_4" class="div_photo">
    <!-- More content inside -->4
  </div> <div id="photo_5" class="div_photo">
    <!-- More content inside -->5
  </div>
</div>

对于第5个，你可以申请额外的css，ID为：

#photo_5 {
    display:inline-block;
    margin-left:520px;
    margin-top:-510px;
}

由于您不想使用表格，因此可以使用css实现此目的。

工作小提琴：jsFiddle Working Demo

Answer 3

CSS

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

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

  #scroll_container_1 {
      height:auto;
      width:257px;
      display:inline-block;

  }

  #scroll_container {
      height:auto;
      width:514px;
  }

  #scroll_container_parent {
      height:auto;
      width:771px;
      overflow-x:scroll;
      overflow-y:hidden;
  }

HTML

<div id="scroll_container_parent">
     <div id="scroll_container">
        <div id="photo_1" class="div_photo">1</div>
        <div id="photo_2" class="div_photo">2</div>
        <div id="photo_3" class="div_photo">3</div>
        <div id="photo_4" class="div_photo">4</div>
        <div id="photo_6" class="div_photo">6</div>
        <div id="photo_7" class="div_photo">7</div>
        <div id="photo_9" class="div_photo">9</div>
        <div id="photo_10" class="div_photo">10</div>
    </div>
    <div id="scroll_container_1">
        <div id="photo_5" class="div_photo_1">5</div>
        <div id="photo_8" class="div_photo_1">8</div>
        <div id="photo_11" class="div_photo_1">11</div>
    </div>
</div>

修改后的HTML ...可能这应该是好的

自定义CSS库

3 个答案: