CSS

CSS面试题,实现固定的布局

HaoOuBa
2021-03-08 / 3 评论 / 249 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2021年03月08日,已超过36天没有更新,若内容或图片失效,请留言反馈。

简单记录个css面试题,要求实现以下需求:

  1. 有间隔,间隔相等,为15px
  2. 无论删除增加 div.item 都不会影响排版
  3. 实现方式随意

klzzh9rg.png

开始认为这个问题应该挺简单,写了下发下有点摸不到头脑,最后想了下可以通过以下方式去实现:

第一种:

<style>
    * {
        box-sizing: border-box;
    }
    .box {
        display: grid;
        gap: 15px;
        grid-template-columns: repeat(2, 1fr);
        width: 30%;
        margin: 0 auto;
        border: 1px solid #ff6800;
        padding: 15px;
    }
    .item {
        height: 150px;
        background: coral;
    }
    .item:nth-child(3n) {
        grid-column: 1 / 3;
}
</style>
<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="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

第二种:

<style>
    * {
        box-sizing: border-box;
    }
    .box {
        width: 30%;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        border: 1px solid #ff6800;
        padding: 7.5px;
    }
    .item {
        background-color: #ff6800;
        height: 150px;
        width: 50%;
        border: 7.5px solid #ffff
    }
    .item:nth-child(3n) {
        width: 100%;
    }
</style>
<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="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

如果你有其他种实现方案,欢迎在下方留言

8

评论 (3)

取消
  1. 头像
    小王先森
    Windows 10 · Google Chrome

    我习惯用flex布局方式

    回复
    1. 头像
      PluginsKers
      Windows 10 · Google Chrome
      @ 小王先森

      我也习惯用flex布局方式 表情

      回复
      1. 头像
        Joe 作者
        Windows 10 · Google Chrome
        @ PluginsKers

        尝试gird布局,很好用表情

        回复