主页 / 问题 / 879019
Accepted
Даша Новикова
Asked:2020-09-09 02:30:43 +0000 UTC2020-09-09 02:30:43 +0000 UTC

这个部分怎么做？

  • 772

你能告诉我如何使这部分正确吗？
我想到的只有选项：制作div.section_right and div.section_left- 一个带有内容的块 - 另一个是空的，并使用border一个div作为白线。或者做三个div块（一个单独的行）。但我担心在所有变体中，通过自适应，都会有一些可怕的东西。一般来说，请告诉我如何使它正确，或者你将如何使它？

在此处输入图像描述

html

2 个回答

  1. Best Answer

    你对自适应有正确的想法。结果，同样的，这些块必须在保持秩序的同时被制作成一个在另一个下面的全宽。因此，最好不要使用不必要的包装器。

    *{
  box-sizing:border-box;
}
body{
  margin:0;
  background-color:#555;
}
.container{
  position:relative;
  color:#fff;
}
.container:before{
  content:'';
  display:block;
  position:absolute;
  top:0;
  left:50%;
  height:100%;
  border-left:1px solid;
}
.element{
  width:calc(50% - 10px);
  height:100px;
  background-color:#cda;
  position:relative;
}
.element:nth-child(2n){
  margin-left:auto;
}
.element:before{
  content:'';
  display:block;
  width:10px;
  height:10px;
  background-color:#555;
  border:2px solid;
  border-radius:50%;
  position:absolute;
  top:calc(50% - 5px);
  right: -18px;
}
.element:nth-child(2n):before{
  right:auto;
  left:-17px;
}
.element:nth-child(3):before{
  width:18px;
  height:18px;
  right:-22px;
}
    <div class="container">
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
</div>

    • 2

  2. 我建议使用带有 jQ​​uery 的动态动画时间轴滑块 - 路线图或类似的东西。此类任务的便捷解决方案。

    • 1

相关问题