DIV横向排列的方法:float/inline-block/flex
以下面这组 div 为例,wrap 的高度由内容撑开
<div id="wrap"><div id="div1">div1</div><div id="div2">div2</div><div id="div3">div3</div>
</div>
平时是这样的,上下排列~
float 浮动
#div1{float: left;
}
#div2 {float: right;
}
#div3 {float: right;
}
然后这样了
成功横向排列了,但是有几个问题~
float 的特点:
- 多个 div 右浮动时,顺序会颠倒,请注意看 div2 和 div3,可以通过将它们再用一个 div 包起来,然后对它们设置左浮动,对父 div 设置右浮动来解决。
- 脱离文档流,若父元素高度由内容撑开,那么就撑不开,从图中可以看到 wrap 没了,因为高度变为了 0,可通过清浮动来解决。
- 文字会环绕在浮动元素周围,图中未表现出来。
- 不能换行,图中未表现出来。
inline-block 行块标签
#div1, #div2, #div3{display: inline-block;
}
横排成功~但同样有些问题:
inline-block 特点:
- 元素间会有空白。这个空白其实是空白符,因为 inline-block 会使元素在行内排列,也就是跟文字在一起排列,而我们源代码中 div 和 div 之间的空格、Tab、换行符在浏览器里会被合并成一个空白符,所以就会出现缝隙,常见的解决方案有:
1.通过给父元素设置 font-size: 0; ,使空白符不可见。但会导致子元素中继承的字体大小也为 0,解决方案:
1.可以明确子元素内字体大小的,为其单独设置文字大小。
2.可以使用 rem 作为字体大小单位来继承 HTML 根元素的字体大小属性。
2.在源代码里把前一个 div 的结束标签和后一个 div 的开始标签贴在一起。可读性极差,丑拒。
<div id="wrap"><div id="div1">div1</div><div id="div2">div2</div><div id="div3">div3</div>
</div>
3.不用 inline-block,嘿嘿~
- 可以换行,如下图
flex 弹性盒模型
最爱的解决方案,给父元素设置 display: flex; 即可。
#wrap{display: flex;
}
效果图:
还可以通过 justify-content 属性调整子元素的水平对齐方式:
#wrap{display: flex;justify-content: flex-start;
}
flex-start:
默认,图同上。
flex-end:
center:
space-around:
space-between:
不过当父元素宽度不够时, flex 默认是不会换行的,而是会等比例压缩,缩放比例 flex-shrink 属性或复合属性 flex 相关。
通过 flex-wrap 属性可以使其换行,该值有三个取值 nowrap、 wrap、 wrap-reverse,默认为 nowrap。
#wrap{display: flex;flex-wrap: nowrap;
}
nowrap
默认,图略。
wrap
wrap-reverse
flex 使用不再深入探讨,推荐阮一峰写的教程 Flex 布局教程:语法篇
DIV横向排列的方法:float/inline-block/flex相关推荐
- 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; } # ...
- 实现让两个DIV横向排列方法揭秘
你对如何定义让两个DIV横向排列的方法是否熟悉,这里和大家分享一下,主要有两种方法,一种是把display换成inline,另一种就是使用float:right属性,相信本文介绍一定会让你有所收获的. ...
- 多个div横向排列的几种方法
以下面这组 div 为例,group的高度由内容撑开 <div id="group"><div id="div1">div1</d ...
- 如何定义让两个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都设 ...
- 盒子横向排列-初识浮动Float(HTML、CSS)
盒子横向排列-初识浮动Float(HTML.CSS) <!DOCTYPE html> <html lang="en"><head><met ...
- css+div横向排列自动换行 - Kaiqisan
大家好,都吃了吗?我是Kaiqisan,是一个不善言辞的羞射男孩,在我们使用div+css布局的时候,由于div是块级元素,在排列的时候总是会自动换行.现在有一个需求就是要能自动换行. <div ...
最新文章
- hadoop-07-ntp服务检查
- 商丘网络推广浅析如何分析竞争对手的网站,制定更优秀的优化方案?
- Android应用开发:数据存储和界面展现-2
- stl-unique()函数去重
- mysql数据丢失_当数据被误删除/误操作后造成数据丢失。你尝试过用什么手段来挽救数据/损失?...
- ARM 之五 发展史及各时期内核(ARM1 ~ ARM11 / Cortex)介绍
- php设计模式的六大原则(六):迪米特法则
- 使用mysql命令行的工具_[MySQL]命令行工具和基本操作
- 苹果或推出不到两千元的iPhone!安卓手机不淡定了
- android p 牛轧糖_Android牛轧糖快速设置图块
- Spring之自动装配注入
- 23种设计模式(9):访问者模式(转)
- @RequiredArgsConstructor(onConstructor = @__(@Autowired)) Intellij IDEA如何去掉@Autowired 注入警告的方法
- centos7 防火墙_【Linux简单实用小命令001】CentOS 7、8的防火墙端口开放
- 2018华为笔试题2
- 小程序对wxParse 使用
- lottie android 卡顿,lottie动画设计_免异常总结
- uni app push 集成华为 及 调试
- 【工具】D2RQ安装和配置
- java开源项目jeecgboot全解析