美文网首页
CSS实现九宫格,细边框

CSS实现九宫格,细边框

作者: 深情的白杨 | 来源:发表于2020-05-14 09:45 被阅读0次

    1、html结构

    <div class="container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
    </div>
    

    2、css布局flex实现

    .container {
          display: flex;
          flex-wrap: wrap;
          width: 300px;
    }
    .container div {
          width: 100px;
          height: 100px;
          box-sizing: border-box;
          border: 1px solid #ccc;
          margin-left: -1px;
          margin-top: -1px;
    }
    

    未完待续

    相关文章

      网友评论

          本文标题:CSS实现九宫格,细边框

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