n宫格的实现方法

我会带着你远行 2021-12-19 04:34 208阅读 0赞

# 方法一、table #

## 1、看成多列 ##

![1207917-20170729162602097-2117140577.png][]

<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、看成多行 ##

![1207917-20170729163339582-123905091.png][]

<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一样

转载于:https://www.cnblogs.com/KarmaDeng/p/7250508.html

[1207917-20170729162602097-2117140577.png]: /images/20211218/9059fbaed08f4079b8a9656eddeb1723.png
[1207917-20170729163339582-123905091.png]: /images/20211218/f7da6533795b416d8eb57248ca745058.png

发表评论取消回复

表情：

评论列表（有 0 条评论，208人围观）

还没有评论，来说两句吧...

相关阅读

相关 Android Glide宫格RecyclerView recycledViewPool MaxRecycledViews onViewRecycled，Kotlin

Android Glide宫格RecyclerView recycledViewPool MaxRecycledViews onViewRecycled，Kotlin

àì夳堔傛蜴生んèń/ 2024年02月18日 12:54/ 0 赞/ 46 阅读

相关 html 9宫格效果图,js实现九宫格布局效果

本文实例为大家分享了js实现九宫格布局效果的具体代码，供大家参考，具体内容如下效果 ![b303ec02f5239d754e5ede8fb8e1e65a.png][]

墨蓝/ 2022年10月06日 05:54/ 0 赞/ 190 阅读

相关 python打印9宫格，25宫格等奇数格，且横竖斜相加和相等

相信大家都做过九宫格的游戏，规则是要求填数字1-9在九个方格内，使横竖斜相加和相等。只填九个那可能有些简单，但是填25个，填49个，81个等奇数个那，这时候就要求我们去找其中的

向右看齐/ 2022年10月03日 00:41/ 0 赞/ 229 阅读

相关微信小程序六宫格抽奖

用微信小程序做一个抽奖活动 ![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NET

向右看齐/ 2022年09月13日 15:23/ 0 赞/ 214 阅读

相关 Android——自定义View实现9宫格解锁

自定义View 1.实现一个子类继承View 2.覆盖onDrow()函数，渲染图像 3.覆盖onTouchEvent()函数 4.监听按下、移动，松

「爱情、让人受尽委屈。」/ 2022年06月03日 01:40/ 0 赞/ 169 阅读

相关仿手机9宫格图形解屏效果

<!DOCTYPE html> <html> <head> <meta charset="UTF-8">

拼搏现实的明天。/ 2022年05月29日 09:44/ 0 赞/ 181 阅读

相关 n宫格的实现方法

方法一、table 1、看成多列 ![1207917-20170729162602097-2117140577.png][] <style>

我会带着你远行/ 2021年12月19日 04:34/ 0 赞/ 209 阅读

相关小程序宫格布局

之前写小程序的时候用了iview的宫格，好像跳过了很多要自己写的坑，今天测试了下，总结一下方法。注意小程序中flex和grid的用法有很多不一眼！小心甄别！ 1.使用ivie

妖狐艹你老母/ 2021年10月19日 03:42/ 0 赞/ 447 阅读

相关移动端宫格布局

1.使用grid布局 container{ display: grid; grid-template-columns: r

末蓝、/ 2021年10月18日 06:26/ 0 赞/ 485 阅读

相关 flutter 宫格组件GridView

方式一: GridView.count( shrinkWrap: true, 尽可能满足自身大小而非父容器 crossAxi

迈不过友情╰/ 2021年07月25日 01:34/ 0 赞/ 467 阅读