HTML+；像Facebook之类的CSS'；时间轴_Html_Css_Facebook

HTML+；像Facebook之类的CSS'；时间轴

html css facebook

HTML+；像Facebook之类的CSS'；时间轴,html,css,facebook,Html,Css,Facebook,我正在尝试创建一个类似于Facebook的时间线的时间线，也就是说，我想要一个有两列的时间线，我可以将元素放在左边和右边为了做到这一点，我从以下代码开始，但它没有按预期工作： <!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8" /> </head> <body> <ul> <li>Test

我正在尝试创建一个类似于Facebook的时间线的时间线，也就是说，我想要一个有两列的时间线，我可以将元素放在左边和右边

为了做到这一点，我从以下代码开始，但它没有按预期工作：

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



测试123
Foobar
另一个测试
/*该行丢失*/

中间的元素不在左边显示，最后一个元素浮到中间元素。

有人知道如何创建一个类似于facebooks one的时间线吗？

有一个Javascript工具可以创建timline，请查看它对我来说似乎是一个非常直接的解决方案！把它放到你的编辑那里。还有什么可以帮忙的，就问吧

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

facebook设计师使用以下策略：

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

我解释了它是如何工作的

我还想为左/右的每个条目添加一条带有项目符号的垂直线，就像在facebooks timeline中一样。使用ul/li元素不是更容易吗？或者反过来说，在你的解决方案中，你会怎么做？你想让我基本上复制facebook吗timeline@Stefan我添加了一个样式。只需学习如何在css中创建一些形状。这很直截了当。这只是一种静态的方法。如果你想学习一种动态的方式，你必须从这个网站上获取javascript，因为我想要一个非常基本的/lightwight解决方案，我不想使用JS。你是否尝试过检查Facebook时间线本身的HTML和CSS，使用一个工具，如IE开发者工具或Fibug？@李察，任何理智的人都不应该考虑接近脸谱网HTML。这真是太可怕了。

<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; 
}