Question

我试图在这里制作类似于Facebook时间线的东西，但由于某种原因我无法得到它。为什么我的右侧div仅在第一次离开之后才跟随。我想让他们从同一个地方开始，就像facebook时间线一样。

我为你做了一个小提琴，所以你可以理解我的问题：http://jsfiddle.net/FHR3q/

此外，在它们之间添加某种分隔符的最佳方法是什么，如线。

Answer 1

像这样写：

<div class="block leftt"></div>
<div class="block right"></div>
<div class="block left"></div>
<div class="block right"></div>

检查此http://jsfiddle.net/FHR3q/6/

<强>已更新

您可以使用 nth-child 属性：

选中此http://jsfiddle.net/FHR3q/15/

使用分隔符http://jsfiddle.net/FHR3q/16/

Answer 2

为左和右定义一个块，然后在其中嵌入更多div，就像这样

http://jsfiddle.net/FHR3q/9/

另外，你不需要使用清晰的

Answer 3

如果更改顺序，则在

中显示html div

<div class="content">
<div class="timeline">
    <div class="block left">
        <h1>Hello, my name is Steve1.</h1><br />
        <h2>Hello, my name is Steve.</h2><br />
        <h3>Hello, my name is Steve.</h3><br />
        <h4>Hello, my name is Steve.</h4><br />
        <h5>Hello, my name is Steve.</h5><br />
        <h6>Hello, my name is Steve.</h6>
    </div>
            <div class="block right">
        <h1>Hello, my name is Steve3.</h1><br />
        <h2>Hello, my name is Steve.</h2><br />
        <h3>Hello, my name is Steve.</h3><br />
        <h4>Hello, my name is Steve.</h4><br />
        <h5>Hello, my name is Steve.</h5><br />
        <h6>Hello, my name is Steve.</h6>
    </div>
    <div class="block left">
        <h1>Hello, my name is Steve2.</h1><br />
        <h2>Hello, my name is Steve.</h2><br />
        <h3>Hello, my name is Steve.</h3><br />
        <h4>Hello, my name is Steve.</h4><br />
        <h5>Hello, my name is Steve.</h5><br />
        <h6>Hello, my name is Steve.</h6>
    </div>

    <div class="block right">
        <h1>Hello, my name is Steve4.</h1><br />
        <h2>Hello, my name is Steve.</h2><br />
        <h3>Hello, my name is Steve.</h3><br />
        <h4>Hello, my name is Steve.</h4><br />
        <h5>Hello, my name is Steve.</h5><br />
        <h6>Hello, my name is Steve.</h6>
    </div>
</div>

将分区划分为左右分区（如facebook时间线）

3 个答案: