3

ここで Facebook のタイムラインに似たものを作成しようとしていますが、何らかの理由で取得できません。なぜ私の右の div は最初の左の 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/

更新しました

これにはn番目の子プロパティを使用できる可能性があります。

これをチェックしてくださいhttp://jsfiddle.net/FHR3q/15/

区切り文字付きhttp://jsfiddle.net/FHR3q/16/

于 2012-04-20T13:37:00.927 に答える
0

左右に1つのブロックを定義し、このようにその中にさらにdivをネストします。

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

また、クリアを使用する必要はありません

于 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 に答える