html - 使用CSS进行DIV堆叠和间距

如您所见（很快），我对CSS有点陌生。最终，我试图开发一个“时间轴”，类似于Facebook几年前的样子，其中每个帖子都将显示在时间轴中。每个职位最终将在左侧和右侧之间交替。例如，帖子1-左侧，帖子2-右侧，帖子3-左侧，等等。

我在安排时间轴时遇到麻烦。我找到了一种使帖子交替显示的方法，但是每个“帖子”本质上都是堆叠在一起的，而我想在每个帖子之间至少留出35px的间距。这意味着第二个帖子（右侧）比第一个帖子的底部（左侧）低35px，第三个帖子比第二个帖子底部（右侧）低35px侧面）...依此类推。

关于如何实现此目标有任何想法吗？

   <div id="timeline" style="background-color: #fff; float: left; padding: 10px; clear: left; width: 900px; margin-top: 25px;">
  <div id="middle" style="width: 900px; height: 133px; background: transparent url('/timeline.png') repeat-y scroll 0px 0px;">
   <div id="leftblock" >
   <img src="/dot1.png">
   <div style="float: left; margin-right: 23px;">
   <div style="border: 1px solid #ccc; width: 400px; float: left;padding: 5px;">adfasdfsdaf</div>
   <img style="float: left;" src="/right_arrow.png">
   </div>
   </div>

   <div id="rightblock">
   <img style="float: left;" src="/dot1.png">
   <div style="float: left; margin-left: 23px;">
   <img style="float: left;" src="h/left_arrow.png">
   <div style="border: 1px solid #ccc; width: 400px; float: left; padding: 5px;">adfasdfsdaf</div>
   </div>
   </div>

   <div id="leftblock" >
   <img src="/dot1.png">
   <div style="float: left; margin-right: 23px;">
   <div style="border: 1px solid #ccc; width: 400px; float: left;padding: 5px;">adfasdfsdaf</div>
   <img style="float: left;" src="right_arrow.png">
   </div>
   </div>

   <div id="rightblock">
   <img style="float: left;" src="dot1.png">
   <div style="float: left; margin-left: 23px;">
   <img style="float: left;" src="/left_arrow.png">
   <div style="border: 1px solid #ccc; width: 400px; float: left; padding: 5px;">adfasdfsdaf</div>
   </div>
   </div>

  </div>
</div>

最佳答案

您需要为CSS使用单独的样式表。这样，您只需要定义2套规则，就可以避免代码重复。无论如何，设置好之后，只需应用此代码。

#leftblock, #rightblock{
    margin-bottom: 35px;
}

这会为每个ID为leftblock或rightblock的div的底部留出35px的空白。

编辑：我的错误，根据@Skullclutter的答案，请使用类而不是id。

关于html - 使用CSS进行DIV堆叠和间距，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33880918/