CSS 网格布局方式一

qq_33974959

已于 2023-11-17 10:16:26 修改

阅读量28

点赞数

分类专栏： CSS 文章标签： javascript 前端 html

于 2023-11-17 10:15:34 首次发布

本文链接：https://blog.csdn.net/qq_33974959/article/details/134456892

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<div style="flex: 1;width: 1px;width: 100%;height: 100%;">
  <ul style="margin: 0;padding: 0px !important;">
    <li style="width: calc(25% - 1px);background-color: lightpink;min-height: 120px;padding: 0;margin: 0 1px 1px 0;box-sizing: border-box;display: inline-block;vertical-align: top;list-style: none"></li>
    <li style="width: calc(25% - 1px);background-color:lightcyan;min-height: 120px;padding: 0;margin: 0 1px 1px 0;box-sizing: border-box;display: inline-block;vertical-align: top;list-style: none"></li>
    <li style="width: calc(25% - 1px);background-color: lightgreen;min-height: 120px;padding: 0;margin: 0 1px 1px 0;box-sizing: border-box;display: inline-block;vertical-align: top;list-style: none"></li>
    <li style="width: calc(25% - 1px);background-color: gold;min-height: 120px;padding: 0;margin: 0 1px 1px 0;box-sizing: border-box;display: inline-block;vertical-align: top;list-style: none"></li>
    <li style="width: calc(25% - 1px);background-color: lightcyan;min-height: 120px;padding: 0;margin: 0 1px 1px 0;box-sizing: border-box;display: inline-block;vertical-align: top;list-style: none"></li>
    <li style="width: calc(25% - 1px);background-color: lightgoldenrodyellow;min-height: 120px;padding: 0;margin: 0 1px 1px 0;box-sizing: border-box;display: inline-block;vertical-align: top;
    list-style: none"></li>
    <li style="width: calc(25% - 1px);background-color: lightpink;min-height: 120px;padding: 0;margin: 0 1px 1px 0;box-sizing: border-box;display: inline-block;vertical-align: top;list-style: none"></li>
  </ul>
</div>

样式预览：