两端对齐-小方法

来源:互联网 发布:多开分身软件 编辑:程序博客网 时间:2024/05/29 13:42
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
  body {
   padding: 0;
   margin: 0;
  }

  /* CSS hack */

  .box {
   width: 1000px;
   margin: 50px auto;
   border: 1px solid #CCC;
   text-align: justify;
   font-size: 0;
  }


  .box:after {
   content: '';
   display: inline-block;
   width: 100%;
   height: 0;
  }

  .box .item {
   width: 300px;
   height: 120px;
   background-color: red;
   display: inline-block;
   margin-bottom:10px;
  }

  .blank {
   width: 300px;
   display: inline-block;
  }
 </style>
</head>
<body>
 <div class="box">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <!-- 后面必须要有一个元素才能两端对齐 -->
  <div class="blank"></div>
 </div>
</body>
</html>


0 0
原创粉丝点击