在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML5  HTML/ css布局 這樣的布局 如何實現(xiàn)

css布局 這樣的布局 如何實現(xiàn)

問題描述

開發(fā)中遇到這樣子的布局，你們?nèi)绾螌崿F(xiàn)的？

clipboard.png

問題出現(xiàn)的環(huán)境背景及自己嘗試過哪些方法

嘗試使用 postion 發(fā)現(xiàn)css代碼有些冗余，求教有什么好的辦法？

回答
編輯回答
離夢

一個小demo，flex布局的，每一塊獨立的，上下的數(shù)量和天數(shù)如果可能換行的，自己要加個不換行的約束下。

<!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>
2018年5月20日 00:18
編輯回答
情殺

用flex布局試一下，每一天是一個模塊挺好

2017年6月6日 02:01
編輯回答
傲嬌范

請百度 css 步驟條 關(guān)鍵詞

2017年1月16日 21:46