2

Facebook のタイムラインに似たタイムラインを作成しようとしています。つまり、要素を左右に配置できる 2 つの列を持つタイムラインが必要です。

そのために、次のコードから始めましたが、期待どおりに動作しません。

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <ul>
      <li>Test 123</li>
      <li style="float:left">Foobar</li>
      <li>Another test</li>
    </ul> /*This line was missing*/
  </body>
</html>

真ん中の要素はその横の左側に表示されず、最後の要素が真ん中の要素に浮かんでいます。

Facebookのタイムラインに似たタイムラインを作成する方法を知っている人はいますか?

4

3 に答える 3

3

私にはかなり簡単な解決策のようです！それをエディターに押し込むだけです。もう助けてください

<html>
<head>
    <title></title>
</head>

<style>
body {
    margin:0px;
}
.wrap {
    width:600px;
    height:100%px;
    background:grey;
    margin:auto;
}
.left{
    margin-left:0px;
    width:290px;
    height:200;
    background-color:blue;
}
.right {
    margin-left:310px;
    width:290px;
    height:200;
    background-color:red;
}
</style>

<body>

<div class="wrap">

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

</div>

</body>
</html>

スタイルを設定したい場合は、css シェイプの作成方法を学ぶだけです

.right {
   width: 290px; 
   height: 300px; 
   margin-left:315px;
   background: purple;
   -moz-border-radius: 2px; 
   -webkit-border-radius: 2px; 
   border-radius: 2px;
}
.right:before {
   content:"";
   position: absolute;
   width: 0;
   height: 0;
   border-top: 7px solid transparent;
   border-right: 10px solid purple;
   border-bottom: 7px solid transparent;
   margin: 13px 0 0 -10px;
}
于 2012-08-24T11:20:28.497 に答える
2

Facebook デザイナーは次の戦略を使用します。

<ol>
   <li class="twoCol" data-side="l|r">
          your box
      <i></i>
   </li>
</ol>

のように見える

LI {
    display: block;
    margin-bottom: 15px;
    position: relative;
    z-index: 2; 
}

 LI[data-side="l"] {
    clear: left;
    float: left; 
}

LI[data-side="r"] {
    clear: right;
    float: right; 
}

.twoCol[data-side="l"] I {
     background-image: url("...");
     background-position: -790px -4px;
}
.twoCol[data-side="r"] I {
    background-image: url("...");
    background-position: -770px -4px;
}

.twoCol I {
    background-repeat: no-repeat;
    background-size: auto auto;
    left: auto;
    right: -18px; 
}

I {
    height: 15px;
    left: -18px;
    position: absolute;
    top: 20px;
    width: 19px;
    z-index: 3; 
}

.twoCol[data-side="l"] + .twoCol[data-side="r"] > I, 
.twoCol[data-side="r"] + .twoCol[data-side="l"] > I {
    top: 40px; 
}

ここでどのように機能するかを説明します

于 2012-09-22T10:28:24.893 に答える
0

タイムラインを作成するための Javascript ツールがあります。http : //timeline.verite.co/ をチェックしてください。

于 2012-08-24T10:27:23.993 に答える