多个div横向排列的几种方法
以下面这组 div 为例,group的高度由内容撑开
<div id="group"><div id="div1">div1</div><div id="div2">div2</div><div id="div3">div3</div>
</div>
显示结果如下为上下排列
常见的有三种方法可以让div横向排列,分别是flex 弹性盒模型、float 浮动 和 通过inline-block 行块标签等。
一、flex 弹性盒模型
flex 弹性盒模型是最简便的方法,也是本人最喜欢用的方法,给父元素设置 display: flex; 即可
#group{display: flex;
}
效果图:
还可以通过 justify-content
属性调整子元素的水平对齐方式:
#group{display: flex;justify-content: flex-start;
}
- flex-start:默认靠右对齐
- flex-end:靠左对齐
- center:水平居中
- space-around:平均分布(左右有间隔)
- space-between:平均分布(左右无间隔)
当父元素宽度不够时, flex 默认是不会换行的,而是会等比例压缩,缩放比例 flex-shrink
属性或复合属性 flex
相关。
二、float 浮动
除了用flex 弹性盒模型设置div横向排列,利用float 浮动属性也可设置div横向排列
代码如下:
#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,解决方案:a. 可以明确子元素内字体大小的,为其单独设置文字大小。
b. 可以使用 rem 作为字体大小单位来继承 HTML 根元素的字体大小属性。
2. 在源代码里把前一个 div 的结束标签和后一个 div 的开始标签贴在一起。可读性极差,丑拒。
<div id="wrap"><div id="div1">div1</div><div id="div2">div2</div><div id="div3">div3</div> </div>
多个div横向排列的几种方法相关推荐
- 实现让两个DIV横向排列方法揭秘
你对如何定义让两个DIV横向排列的方法是否熟悉,这里和大家分享一下,主要有两种方法,一种是把display换成inline,另一种就是使用float:right属性,相信本文介绍一定会让你有所收获的. ...
- div横排 html_HTML+CSS-如何定义让两个div横向排列
方法一: 一般情况,默认的div是写一个换一行,那么如何定义两个div横向排列而不换行呢? div默认的display属性是block.所以每一个div都是新的一行,现在把display换成inlin ...
- 两个div横向排列,顶端对齐的方式。
2019独角兽企业重金招聘Python工程师标准>>> 两个div横向排列,顶端对齐的方式. 博客分类: div css 两个div横向排列,顶端对齐的方式. 1.左右两个div都设 ...
- 如何定义让两个div横向排列
方法一: 一般情况,默认的div是写一个换一行,那么如何定义两个div横向排列而不换行呢? div默认的display属性是block.所以每一个div都是新的一行,现在把display换成inlin ...
- 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; } # ...
- js获取DIV的位置坐标的三种方法!
js获取DIV的位置坐标的三种方法! 方法一: var odiv=document.getElementById('divid'); alert(odiv.getBoundingClientRect( ...
- 用JQuery或JS改变div的id的五种方法
div的id是可以改变的,通常使用的方法是通过JQuery或Javascript来实现.本文介绍用JQuery或JS改变div的id的五种方法. 方法一:使用Tag选择器 JQuery代码如下: &l ...
- 关系型数据库横向扩展的三种方法
本文是 Oracle Coherence 3.5一书,第一章: Achieving Performance, Scalability, and Availability Objectives,第二节: ...
最新文章
- prometheus监控_使用Prometheus和Grafana监视开放自由
- python3精要(22)-函数(3)
- js 两行之间的设置间距_防火间距
- 计算机与人脑_要把人脑连到计算机上!马斯克真敢想,但人类准备好了吗?
- VS2015中快捷注释代码块
- serv-u 数据备份_如何使用用户数据脚本在EC2实例上安装Apache Web Server
- Redis---概述
- 使用final类的作用是什么?
- java计算器 运算符优先级_跪求大神帮忙,怎样在java 计算器中实现,四则运算优先级;...
- java怎么播放不了声音,java – 为什么这段代码不播放声音文件
- Spring Boot这只怪物到底是如何跑起来的?
- Column name pattern can not be NULL or empty.
- SQL Server中Rowcount与@@Rowcount的用法 和set nocount on 也会更新@@Rowcount
- xadmin 组件拓展自定义使用
- 为什么是GCN(转)
- Thinkpad T430自带Win7系统重装为XP
- 伽罗华域, 二维码和CRC
- CH2_数字图像基础
- 小程序scroll-view 设置scroll-y=false 不管用的问题
- 任重道远的印度人工智能