兼容低版本浏览器的格子布局方式

最新推荐文章于 2025-08-04 08:18:38 发布

原创最新推荐文章于 2025-08-04 08:18:38 发布 · 764 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#格子 #grid #兼容

css 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了三种不同的CSS网格布局实现方式，通过具体的代码示例展示了如何使用浮动、边距负值等技术来创建不同样式的网格布局。每种布局都有其特点，适用于不同的网页设计需求。

布局一

<style>
    ul, ul *{ margin: 0; padding: 0; box-sizing: border-box; }
    ul { width: 400px; float: left;  margin-right: 100px;  }
    ul:after { content: ''; display: block; width: 0; height: 0; clear: both; }
    li { list-style: none; float: left; }
    .grid1 {  border: solid #aaa; border-width: 1px 0 0 1px;  }
    .grid1 li { width: 25%; height: 100px; border: solid #aaa; border-width: 0 1px 1px 0; }
</style>
<ul class="grid1">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
   </ul>

这里写图片描述

布局二

<style>
    ul, ul *{ margin: 0; padding: 0; box-sizing: border-box; }
    ul { width: 400px; float: left;  margin-right: 100px;  }
    ul:after { content: ''; display: block; width: 0; height: 0; clear: both; }
    li { list-style: none; float: left; }
    .grid2 {  border-top: 1px solid #aaa; }
    .grid2 li { border: 1px solid #aaa; width: 101px; height: 100px; margin-top: -1px; margin-right: -1px;}
</style>
<ul class="grid2">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
   </ul>

这里写图片描述

布局三

<style>
    ul, ul *{ margin: 0; padding: 0; box-sizing: border-box; }
    ul { width: 400px; float: left;  margin-right: 100px;  }
    ul:after { content: ''; display: block; width: 0; height: 0; clear: both; }
    li { list-style: none; float: left; }
    .grid3 { margin-top: 1px; margin-left: 1px; }
    .grid3 li { width: 25%; height: 100px;  border: 1px solid #aaa;  margin-top: -1px; margin-right: -1px;}
</style>
<ul class="grid3">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
   </ul>