DIV 使用 CSS 堆叠和间距

Question

正如您将看到的（很快），我对 CSS 有点陌生。最终，我正在尝试开发一个 "timeline"，有点像 facebook 多年前的东西，其中每个 post 都会显示在时间轴中。每个 post 最终都会在左侧和右侧之间交替。例如，Post 1 - 左侧，post 2 - 右侧，post 3 - 左侧，等等...

我的时间线布局有问题。我找到了一种方法来制作 post 的交替边，但是每个 "post" 基本上是彼此堆叠的，而我想在每个 [=22] 之间放置至少 35px 的间距=].这意味着第二个 post（在右侧）将比第一个 post（在左侧）的底部低 35px，第三个 post 将是 35px低于第二个 post 的底部（在右侧）...依此类推。

有什么想法可以实现吗？

   <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 底部留出了 35 像素的边距。

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

Answer 2

补充一点：页面上每个ID名称只能有一个。对于您正在做的事情，我建议改用 class=leftblock 和 class=rightblock。

那么Eric的代码就变成了：

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

Answer 3

作为对您问题的直接回答，您可以使用 margin-bottom: 35px; 在每个框下方添加间距。

您可以采取一些措施使此代码在未来使用时运行良好，并遵循标准做法。

首先，id 属性在整个页面中必须是唯一的 - #content 的 ID 只能出现一次，因此它们不适合重复元素。请改用 class，它可以根据需要经常使用。

接下来，使用外部样式 sheet 而不是内联样式。它们更易于管理和行业标准。

根据您的要求使用尽可能少的元素通常也是一个好主意（尽可能将样式组合到一个元素上）。

我已经标记了您的代码以显示修复后的代码段的外观：

#timeline{
    background-color:#fff;
    float: left;
    padding: 10px;
    clear: left;
    width: 900px;
    margin-top: 25px;
}
#middle{
    background: transparent url('/timeline.png') repeat-y scroll 0px 0px;
}
.block{
    float: left;
    width: 400px;
    display: block;
    margin-right: 23px;
    margin-bottom: 35px;
}
.block .content{
    border: 1px solid #ccc;
    padding: 5px;
}

.icon{
    float: left;
}
.block:nth-of-type(odd) .icon{
    float: right;
}

<div id="timeline">
    <div id="middle">
        <div  class="block" >
            <img class="icon" src="/dot1.png" />
            <img class="icon" src="/right_arrow.png" />
            <div class="content">adfasdfsdaf</div>
        </div>

        <div class="block">
            <img class="icon" src="/dot1.png" />
            <img class="icon" src="h/left_arrow.png" />
            <div class="content">adfasdfsdafadfasdfsdaf<br />adfasdfsdaf<br /></div>
        </div>
        <div  class="block" >
            <img class="icon" src="/dot1.png" />
            <img class="icon" src="/right_arrow.png" />
            <div class="content">adfasdfsdaf<br />adfasdfsdaf<br /></div>
        </div>

        <div class="block">
            <img class="icon" src="/dot1.png" />
            <img class="icon" src="h/left_arrow.png" />
            <div class="content">adfasdfsdaf</div>
        </div>

    </div>
</div>

http://jsfiddle.net/daCrosby/g2w6dzo3/1/

DIV 使用 CSS 堆叠和间距

DIV Stacking & Spacing Using CSS

html

css

timeline