平时做项目中总是能碰到让多个div显示在一排的问题
例如:
将上图显示为:
其实有很多种方法都可解决此问题
在这里做一下总结
一、使用 display
也就是说块元素占用了全部宽度,前后会带有换行符,会自动的在一行显示,而内联元素只需要设置宽度,不会带有换行符,也就是默认不换行
那么我们就可以考虑把 div 这种块元素转换为内联元素 即可实现 div 在一行显示,就可达到我们的目的
display有很多属性值 如下:
none:隐藏对象。与visibility属性的hidden值不同,其不为被隐藏的对象保留其物理空间
inline:指定对象为内联元素。
block:指定对象为块元素。
list-item:指定对象为列表项目。
inline-block:指定对象为内联块元素。(CSS2)
table:指定对象作为块元素级的表格。类同于html标签<table>(CSS2)
inline-table:指定对象作为内联元素级的表格。类同于html标签<table>(CSS2)
table-caption:指定对象作为表格标题。类同于html标签<caption>(CSS2)
table-cell:指定对象作为表格单元格。类同于html标签<td>(CSS2)
table-row:指定对象作为表格行。类同于html标签<tr>(CSS2)
table-row-group:指定对象作为表格行组。类同于html标签<tbody>(CSS2)
table-column:指定对象作为表格列。类同于html标签<col>(CSS2)
table-column-group:指定对象作为表格列组显示。类同于html标签<colgroup>(CSS2)
table-header-group:指定对象作为表格标题组。类同于html标签<thead>(CSS2)
table-footer-group:指定对象作为表格脚注组。类同于html标签<tfoot>(CSS2)
run-in:根据上下文决定对象是内联对象还是块级对象。(CSS3)
box:将对象作为弹性弹性盒显示。(弹性盒最老版本)(CSS3)
inline-box:将对象作为内联块级弹性弹性盒显示。(弹性盒最老版本)(CSS3)
flexbox:将对象作为弹性弹性盒显示。(弹性盒过渡版本)(CSS3)
inline-flexbox:将对象作为内联块级弹性弹性盒显示。(弹性盒过渡版本)(CSS3)
flex:将对象作为弹性弹性盒显示。(弹性盒最新版本)(CSS3)
inline-flex:将对象作为内联块级弹性弹性盒显示。(弹性盒最新版本)(CSS3)
那我们只需要关注以下几个:
display: inline
、display: block
、display: inline-block
display: box
1. display: inline
(将对象指定为内联元素)
就可以在div等块元素的 css 样式种添加 display: inline,即可将div转换为内联元素,就可以在一行显示;
同理,若要将 内联元素 转换为 块元素 显示,可以添加 display: block
display: inline-block 同理
2. display: box
(将对象作为弹性弹性盒显示)
在元素上设置该属性,可使其子代排列在同一水平上,类似display:inline-block。
可在其子代设置如下属性:(具体讲解可参考:display: box)
1.box-flex:number
\qquad (1)占父级元素宽度的number份
\qquad (2)若子元素设置固定宽度,则该子元素应用固定宽度,其他未设置固定宽度的字元素将余下的父级宽度(父级-已设置固定宽度的子代元素的总宽度按 number占份数
\qquad (3)若子元素有margin值,则按余下(父级宽度-子代固定总宽度-总margin值)宽度占number份
2.box-orient:horizontal/vertical
\qquad 在父级上设置该属性,则子代按水平排列或竖直排列。
\qquad 注:所有主流浏览器不支持该属性,必须加上前缀。
\qquad (1)horizontal 水平排列,子代总width=父级width。若父级固定宽度,则子代设置的width无效,子代会撑满父级宽度。
\qquad (2)vertical 垂直排列,子代总height=父级height。若父级固定高度,则子代设置的height无效,子代会撑满父级高度。
3.box-direction:normal/reverse
\qquad 在父级上设置该属性,确认子代的排列顺序。
\qquad (1)normal 默认值,子代按html顺序排列
\qquad (2)reverse 反序
4.box-align:start/end/center/stretch
\qquad 在父级设置,子代的垂直对齐方式。
\qquad (1)start 垂直顶部对齐
\qquad (2)end 垂直底部对齐
\qquad (3)center 垂直居中对齐
\qquad (4)stretch 拉伸子代的高度,与父级设置的高度一致。子代height无效。
5.box-pack:start/end/center
\qquad 在父级设置,子代的水平对齐方式。
\qquad (1)start 水平左对齐
\qquad (2)end 水平右对齐
\qquad (3)center 水平居中对齐
由于子元素 box-orient 的默认值是 box-orient:horizontal(即子元素水平排列),那么只需要在父元素上设置 display: box即可实现 div 水平排列的效果
二、使用 float
float: left
靠页面的左边并排显示
对div设置一个float浮动属性就可以让 div 并排显示,只要并排div盒子总宽度小于或等于最外层盒子宽度即可
<div style="float:left;">div1</div>
<div style="float:left;">div2</div>
<div style="float:left;">div3</div>