n宫格的实现方法

最新推荐文章于 2022-05-02 20:15:37 发布

会做饭的技术男

最新推荐文章于 2022-05-02 20:15:37 发布

阅读量294

点赞数

分类专栏：前端文章标签：【理解】css css

原文链接：https://www.mk2048.com/blog/blog.php?id=h1k2iahii1aa&title=n%E5%AE%AB%E6%A0%BC%E7%9A%84%E5%AE%9E%E7%8E%B0%E6%96%B9%E6%B3%95

版权

前端专栏收录该内容

2508 篇文章 12 订阅

订阅专栏

方法一、table

1、看成多列

<style>
    .line{  display: table; width: 1024px;
                clear:both; overflow:auto;  /*-----设置父div高度包住子div高度*/}
    .news{  display: table-row; float: left;    background-color:#236483;}

    .news img,.news-txt{    float:left; display: table-cell;    height: 150px;
            width: 100%;    font-size: 1.5em;   text-align: center;}

<html>
    <div class="line">
    <!-- 第一列 -->
        <div class="news">
        <!-- 第一格 -->
            <img src="img/news.jpg"><div class="news-txt">a</div>
        <!-- 第二格 -->        
            <img src="img/news.jpg"><div class="news-txt">b </div>
        </div>

    <!-- 第二列 -->
        <div class="news">
        <!-- 第一格 -->    <div class="news-txt">a</div>   <img src="img/news.jpg">

        <!-- 第二格 -->    <div class="news-txt">b</div>   <img src="img/news.jpg">
        </div>

    </div>

2、看成多行

<style>
    .line{  display: table; width: 1024px;
                clear:both; overflow:auto;  /*-----设置父div高度包住子div高度*/}

    .news{  display: table-row;     float: left;        background-color:#236483;}

    .news img,.news-txt{    float:left; display: table-cell;    height: 150px;
            width: 25%; font-size: 1.5em;   text-align: center;}

<html>
    <div class="line">
    <!-- 第一行 -->        
                <div class="news">
        <!-- 第一格 -->
            <img src="img/news.jpg"><div class="news-txt">    a </div>
        <!-- 第二格 -->
            <img src="img/news.jpg"><div class="news-txt">    b </div>
        </div>
    <!-- 第二行 -->
        <div class="news">
        <!-- 第一格 -->
            <div class="news-txt">    c </div>
            <img src="img/news.jpg">
        <!-- 第二格 -->
            <div class="news-txt">    d    </div>
            <img src="img/news.jpg">
        </div>
    </div>

总结：
1、优点table-cell单元格高度取其所在行l单元格高度的最大值，高度统一
2、缺点：①ie6/7兼容性不好， ②后台输出时需要水平、垂直各repeat

方法二、inline-block

<style>
    .line{  display: table; width: 1024px;
                clear:both; overflow:auto;  /*-----设置父div高度包住子div高度*/}
    .news{  display: table-row; float: left;    background-color:#236483;}

    .news img,.news-txt{    float:left; display: inline-block;  height: 150px;
            width: 100%;    font-size: 1.5em;   text-align: center;}

区别：display: inline-block
其余相同

优点：①可与文字，图片混排，可内嵌block属性元素，可以可以置身于inline水平的元素中；②所在行高取单元格最高值
③ie6/7虽然不支持display，但让其表现的跟inline-block一样