CSS:三个div放在一排

编程入门 行业动态 更新时间:2024-10-05 17:22:03

CSS:三个div<a href=https://www.elefans.com/category/jswz/34/1757335.html style=放在一排"/>

CSS:三个div放在一排

<div> 1 </div>

<div> 2 </div>

<div> 3 </div>

 

方法一:div{display:inline-block;}  <!--不过div之间有空隙,并且不方便处理-->

方法二:div{float:left;}  <!--div之间无空隙-->

方法三:flex布局。123外面加一个div,这个div的style为:{display:flex; flex-direction:row;}   <!--row:排;column:列-->

 

浮动首先需要添加标准流父级

浮动总是找离它最近的父级元素对齐,且不会超出内边距(padding)的范围

一个父盒子里面的子盒子,如果其中一个子盒子有浮动,则其他子盒子都需要浮动,这样子盒子才能放在一排。

块级元素添加浮动float之后,就具有了行内块元素的特性(div的宽度随着文字的长度变化,根据文字多少自动撑开,类似于给文字加背景)。

更多推荐

CSS:三个div放在一排

本文发布于:2024-02-14 01:16:31,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1761492.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:放在   CSS   div

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!