html - 使用 CSS 的 DIV 堆叠和间距

Question

正如您将看到的(很快)，我对 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>

Answer 1

您需要为您的 CSS 使用单独的样式表。这样您只需要定义 2 组规则，就可以避免代码重复。无论如何，一旦您完成设置，只需应用此代码即可。

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

这为每个 id 为 leftblock 或 rightblock 的 div 的底部留出 35px 的边距。

编辑:我的错误，根据@Skullclutter 的回答，请使用类而不是 ID。