3

我正在尝试在这里制作类似于 facebook 时间线的东西，但由于某种原因我无法得到它。为什么我的右 div 只跟随在第一个左下方之后。我希望他们从同一个地方开始，就像 facebook 时间线一样。

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

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

4

3 回答 3

3

像这样写：

<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/

于 2012-04-20T13:37:00.927 回答
0

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

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

另外，您不需要使用 clear

于 2012-04-20T13:38:38.927 回答
0

如果您更改显示 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>

于 2012-04-20T13:39:05.267 回答