css + div 常用的3种横向排列自动换行

序：

​ 在我们使用div+css布局的时候，由于div是块级元素，在排列的时候总是会自动换行。在项目这种需求，没少见，今天就来总结下，方便以后CV，嘿嘿嘿~~

案例：

<div class="main">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
</div>

        

          
        
        
        

          

          AI 代码解读
        
      
      

    .main {
        width: 800px;
        height: 600px;
        border: 1px solid #000;
    }

    .block {
        width: 100px;
        height: 80px;
        margin: 15px;
        border: 1px solid #f00;
    }

        

          
        
        
        

          

          AI 代码解读
        
      
      

方法一：inline-block

• 为内部的成员div添加 display: inline-block

    .block {
        width: 100px;
        height: 80px;
        margin: 15px;
        border: 1px solid #f00;
        display: inline-block; 
        /* div的默认的display为block，块级元素，这也是导致div默认竖向排列的原因 */
    }

        

          
        
        
        

          

          AI 代码解读
        
      
      

方法二：flex布局

• 修改排列方式，使用flex布局

    .main {
        width: 800px;
        height: auto;    /* 不要使用定高度(可不要)，后果自负 */
        border: 1px solid #000;
        display: flex;
        flex-wrap: wrap;
    }

        

          
        
        
        

          

          AI 代码解读
        
      
      

方法三：grid布局

• 使用grid布局

.main {
        width: 800px;
        border: 1px solid #000;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr; 
        /* 横向排列规则，把宽度分为三等分 */
    }

        

          
        
        
        

          

          AI 代码解读