时间戳

首页 > 解决方案 > 使body宽度对应于div的存在

html - 使body宽度对应于div的存在

问题描述

我为每个信息创建了一个带有点的水平时间线，但是如果创建了足够的“点/信息”，则需要能够扩展主体宽度以使点继续在时间线的同一行上，而不是向下移动，因为页面的有限宽度。

我试着给身体一个更大的宽度，它确实解决了这个问题，但我更愿意让宽度动态地与时间线的点相对应。因此，如果时间轴上只有几个点，则页面不必更宽，但如果有很多，则页面宽度应该扩大。

这是我的时间线的CSS。时间是用 PHP 和 HTML 实现的。这些点是通过一个简单的 php sql 循环创建的。

 div#timeline3 {
 background-color: lightblue;
 margin-top: 150px;
 height: 12px;
 width: 100%;
        top: 0px;
   position: relative;


      }
 div#timeline3 .inside {
   position: absolute;
   height: 4px;
   background-color: #fff;
   width: 0%;
   top: 3px;
   left: 0;
 }




 div#timeline3 .dot {
   z-index: 99;
   transition: 0.3s ease-in-out;
   width: 52px;
   height: 52px;
   border-radius: 50%;
   position: relative;
   top: -20px;
   margin-left: 220px;
   float: left;

   text-align: center;
   cursor: pointer;
   -webkit-box-shadow: 8px 0px 05.3px -8px black, -8px 0px 05.3px -8px black;
    -moz-box-shadow: 8px 0px 05.3px -8px black, -8px 0px 05.3px -8px black;
    box-shadow: 8px 0px 05.3px -8px black, -8px 0px 05.3px -8px black;
 }
 div#timeline3 .dot:nth-child(1) {
   left: 1%;
   background-color: lightblue;

 }

标签： htmlcss

解决方案

推荐阅读