美文网首页
多列等分布局

多列等分布局

作者: igor_d140 | 来源:发表于2018-09-26 15:57 被阅读2次
123.png
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>columns</title>
</head>
<style>
  body{
    padding: 0;
    margin: 0;
  }
  th{
    background-color: green;
    height: 50px;
    border:0;
  }
  table{
    width: 100%;
    border-spacing: 0;
    border:0;
  }
  .flex{
    display: flex;
    width: 100%;
    height: 50px;
  }
  .flex .item{
    background-color: pink;
    flex: 1;
  }
  .grid {
    display: grid;
    grid-template-columns: auto auto auto;
  }
  .grid .item{
    background-color: lightgreen;
    height: 50px;
  }
  .cell{
    width: 100%;
    height: 50px;
    display: table;
  }
  .cell .item{
    display: table-cell;
    height: 50px;
    background-color: lightblue;
  }
  .column{
    column-count: 3;
    -webkit-column-count:3;
    column-gap: 0;
  }
  .column .item{
    background-color: purple;
    height: 50px;
  }
</style>
<body>
  <table>
    <thead>
      <th></th>
      <th></th>
      <th></th>
    </thead>
  </table>
  <div class="flex">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <div class="grid">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <div class="cell">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <div class="column">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</body>
</html>

相关文章

  • 页面架构

    布局解决方案 水平居中布局 垂直居中布局 水平垂直都居中的布局 多列布局 多列等分布局 多列等高布局 在多列布局的...

  • 多列等分布局

  • 多列等分布局

    实用float实现 .parent{margin-left:-20px}/假设列之间的间距为20px/.colum...

  • 页面架构——多列布局_等分布局

    使用float 使用table 不用设置每个单元格的宽度,因为table-layout默认平分,对于float兼容...

  • 多列布局(下)

    这篇来说一下多列布局的后两种-等分布局与等高布局。我们所说通常所说的等分布局如下: 也就是说最左边会多出一个20p...

  • 一列等分多列

    最近被一朋友给难住了有没有快速等分成三列,没多想直接用最简单的方法你和他说 通过添加辅助列进行复制粘就可以,今天去...

  • CSS3开发常用核心技能

    基础网页布局 布局分类 一列布局 两列布局 三列布局 多列布局 一列布局: 二列布局: 三列布局: ⚠️ midd...

  • css常见布局(二)

    采用flex实现两列,三列等多列的布局 一、两列布局 二、三列布局

  • 多列布局

    column-width: 列的宽度 column-count: 列的数量 column-gap: 列与列之间...

  • 多列布局

    column-width: 列的宽度 column-count: 列的数量 column-gap : 列与列的间...

网友评论

      本文标题:多列等分布局

      本文链接:https://www.haomeiwen.com/subject/daxjoftx.html