html - HTML+CSS 中的时间线示例，类似于 Facebook 的时间线-6ren

html - HTML+CSS 中的时间线示例，类似于 Facebook 的时间线

转载作者：太空宇宙更新时间：2023-11-04 15:18:28

我正在尝试创建一个类似于 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/

首页

博学

6Ren·AI

商城

html - HTML+CSS 中的时间线示例，类似于 Facebook 的时间线