我正在尝试创建一个类似于 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>
中间的元素不显示在左边，最后一个元素 float 到中间。
有人知道如何创建类似于 Facebook 的时间线吗？
最佳答案
对我来说这似乎是一个非常简单的解决方案!只需将其放入编辑器中即可。如有任何帮助，请询问
<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;
}
关于html - HTML+CSS 中的时间线示例，如 Facebook 的时间线，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12106720/