display:table实现多列等高布局

最新推荐文章于 2021-06-18 06:49:11 发布

weixin_30859423

最新推荐文章于 2021-06-18 06:49:11 发布

阅读量227

点赞数

原文链接：http://www.cnblogs.com/hmycheryl/p/11352394.html

版权

<html lang="zh">
  <head>
      <meta charset="UTF-8">
      <title></title>
      <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
      <style>
      .main {
        margin-left: -30px;
        margin-right: -30px;
      }
      .wrap {
        display: table;
        width: 100%;
        border-spacing: 30px 0;
      }
      .wrap > div {
        background: #f00;
        display: table-cell;
      }
      </style>
  </head>
  <body>
    <div class="main">
      <div class="wrap">
        <div style="height: 100px;">1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
      </div>
    </div>
  </body>
</html>

效果图：

转载于:https://www.cnblogs.com/hmycheryl/p/11352394.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30859423

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
display:table实现多列等高布局

<html lang="zh"> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1.0,user-...
复制链接

扫一扫