css+div横向排列自动换行 - Kaiqisan

大家好，都吃了吗？我是Kaiqisan,是一个不善言辞的羞射男孩,在我们使用div+css布局的时候，由于div是块级元素，在排列的时候总是会自动换行。现在有一个需求就是要能自动换行。

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

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

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

显示效果

有的时候，我们想要让它们横向排列，然后再在到达父块右端的时候自动换行，这样的排版响应式的页面里面具有非常重大的意义。

于是，我们可以这么做

方法1

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

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

然后我们将div块增加到更多的块数

<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 class="block"></div>
	<div class="block"></div>
	<div class="block"></div>
	<div class="block"></div>
	<div class="block"></div>
	<div class="block"></div>
</div>

显示效果

方法2

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

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

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

方法3

• 使用Grid布局

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

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

展示效果

这个方法能够更加精确地对你的div块进行排版，详细内容会在以后出一个专栏。grad排版也是公司面试css这块知识里经常会出的一块知识。

总结

没有总结，直接拿来用就行了。