大家好，都吃了吗？我是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这块知识里经常会出的一块知识。

总结

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

css+div横向排列自动换行 - Kaiqisan相关推荐

CSS——css+div横向排列自动换行
为内部div添加display: inline-block <div ><div style="display: inline-block">内容一< ...
div横向排列自动换行
<div class="main"> <div class="block"></div> <div class=&qu ...
实现让两个DIV横向排列方法揭秘
你对如何定义让两个DIV横向排列的方法是否熟悉,这里和大家分享一下,主要有两种方法,一种是把display换成inline,另一种就是使用float:right属性,相信本文介绍一定会让你有所收获的. ...
如何定义让两个div横向排列
方法一: 一般情况,默认的div是写一个换一行,那么如何定义两个div横向排列而不换行呢? div默认的display属性是block.所以每一个div都是新的一行,现在把display换成inlin ...
div横排 html_HTML+CSS-如何定义让两个div横向排列
方法一: 一般情况,默认的div是写一个换一行,那么如何定义两个div横向排列而不换行呢? div默认的display属性是block.所以每一个div都是新的一行,现在把display换成inlin ...
两个div横向排列，顶端对齐的方式。
2019独角兽企业重金招聘Python工程师标准>>> 两个div横向排列,顶端对齐的方式. 博客分类: div css 两个div横向排列,顶端对齐的方式. 1.左右两个div都设 ...
多个div横向排列的几种方法
以下面这组 div 为例,group的高度由内容撑开 <div id="group"><div id="div1">div1</d ...
html5:div 横向排列的方法。
div 横向排列的方法. 以下面这组 div 为例,wrap 的高度由内容撑开 <div id="wrap"><div id="div1"&g ...
html5中div怎么横着写,html5:div 横向排列的方法
div 横向排列的方法. 以下面这组 div 为例,wrap 的高度由内容撑开 div1 div2 div3 平时是这样的,上下排列~ float 浮动 #div1{ float: left; } # ...

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

方法1

方法2

方法3

总结

css+div横向排列自动换行 - Kaiqisan相关推荐

最新文章

热门文章