问题描述开发中遇到这样子的布局，你们如何实现的？问题出现的环境背景及自己尝试过哪些方法尝试使用 postion 发现css代码有些冗余，求教有什么好的办法？

用flex布局试一下，每一天是一个模块挺好

请百度 css 步骤条关键词

css布局 这样的布局 如何实现

一个小demo，flex布局的，每一块独立的，上下的数量和天数如果可能换行的，自己要加个不换行的约束下。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
  *{padding:0;margin:auto;}
  ul{display:flex;align-items:center;justify-content:space-between;list-style:none;}
  li{width:33.33%;text-align:center;}
  .bar{width:100%;height:1px;margin:10px auto;background-color:#ccc;position:relative;}
  .bar .icon{height:14px;width:14px;display:inline-block;border-radius:50%;background-color:#ccc;position:absolute;left:50%;top:0;margin-top:-7px;margin-left:-7px;}
  </style>
</head>
<body>
  <div>
    <ul>
      <li>
        <div class="num">+1</div>
        <div class="bar">
          <span class="icon"></span>
        </div>
        <div class="day">1天</div>
      </li>
      <li>
        <div class="num">+1</div>
        <div class="bar">
          <span class="icon"></span>
        </div>
        <div class="day">1天</div>
      </li>
      <li>
        <div class="num">+1</div>
        <div class="bar">
          <span class="icon"></span>
        </div>
        <div class="day">1天</div>
      </li>
    </ul>
  </div>
</body>
</html>

css布局这样的布局如何实现

问题描述

问题出现的环境背景及自己尝试过哪些方法

你尚未登录，登录后可以

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

css布局怎么保证右边一直在可视范围内？

H5页面点击按钮使用window.open 打开并展示一个pdf，安卓变成下载了？

echarts底部滑块不要背景色的问题？

图片沿着圆环的转动有什么方法吗？

flex相关 flex: 1的子元素如何宽度能100%且不溢出？

点击dom节点里面的子元素，如何点击的是某个节点？

css布局 这样的布局 如何实现

问题描述

问题出现的环境背景及自己尝试过哪些方法

你尚未登录，登录后可以

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

css布局怎么保证右边一直在可视范围内？

H5页面 点击按钮使用window.open 打开并展示一个pdf，安卓变成下载了？

echarts底部滑块不要背景色的问题？

图片沿着圆环的转动有什么方法吗？

flex相关 flex: 1的子元素如何宽度能100%且不溢出？

点击dom节点里面的子元素，如何点击的是某个节点？

css布局这样的布局如何实现

H5页面点击按钮使用window.open 打开并展示一个pdf，安卓变成下载了？