处理两个div不在同一行（自用，两种方法）

方法1：浮动

通过浮动使两个div在同一行显示，两个div同时左浮动（float: left）或者有浮动（float: right）。

方法2：display: inline-block转为行内块

使用display: inline-block将两个盒子转为行内块，实现两个div同行显示。

注意：使用display: inlien-block转为行内块之后，两个行内块儿元素之间有缝隙。

产生缝隙的原因：

元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据white-space的处理方式（默认是normal，合并多余空白），我们这里是因为div1和div2两个盒子代码的之间的"回车"被处理成为了缝隙。我们将两个div的代码写在一行就可以解决了

处理两个div不在同一行（自用，两种方法）相关推荐

div和div之间画横线_HTML在两个div标签中间画一条竖线的方法
HTML在两个div标签中间画一条竖线的方法发布时间:2020-09-14 11:34:51 来源:亿速云阅读:170 作者:小新这篇文章主要介绍HTML在两个div标签中间画一条竖线的方法,文 ...
flex 固定一列_css实现两列固定与一列自适应的几种方法
本文介绍了css实现两列固定与一列自适应的几种方法,分享给大家,具体如下: 1.flex布局 Flexible Box 模型,通常被称为 flexbox,是一种一维的布局模型.它给 flexbox 的 ...
java计算两个日期之间相差的天数的四种方法
计算两个日期之间相差的天数的四种方法第一种:时间戳的方式,计算两个日期的时间戳的差,再除当天的毫秒数即可得到相差的天数. public static void main(String[] args) ...
python两个元组相加_Python两个字典键同值相加的几种方法
Python中,如何合并两个键相同,值为元祖类型的字典? dicxs={"李明":("男",19), "杨柳":("女" ...
css如何让两个div并列在同一行
让两个Div并排显示的方法有很多,使用display的inline属性.通过设置float来让Div并排显示都可以实现,感兴趣的朋友可以参考下本文让两个Div并排显示一.使用display的inl ...
两个div如何在同一行显示
<div style="float:left;height:50px; width:510px;background-color: red;"></div> ...
CSS总结div中的内容垂直居中的四种方法
一.行高(line-height)法如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容器的高度相同即可,比如: p { height:30px; line-height:3 ...
HTML总结div中的内容垂直居中的五种方法
一.行高(line-height)法如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容器的高度相同即可,比如: p { height:30px; line-height:3 ...
CSS总结div中的内容垂直居中的五种方法
一.行高(line-height)法如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容器的高度相同即可,比如: p { height:30px; line-height:3 ...

处理两个div不在同一行（自用，两种方法）

方法1：浮动

方法2：display: inline-block转为行内块

处理两个div不在同一行（自用，两种方法）相关推荐

最新文章

热门文章