两个div并列一行显示的多种方法

以下提供了5种实现两个div并列一行显示的方法，其中最常用的为浮动，还有定位等方法可以实现。

方法一：float浮动，float:left;为左浮动，也可以设置为float:right;右浮动，也可以实现两个div并列一行。

#div1{width:50%;
height:300px;
background:blue;
float:left;
}
#div2{width:50%;
height:300px;
background:green;
float:left;
}

方法二：display:table-cell

#parent{width:100%;
display:table;
}
#div1{width:50%;
height:300px;
background:blue;
display:table-cell;
}
#div2{width:50%;
height:300px;
background:green;
display:table-cell;
}

方法三：负margin

#parent{display:flex;
overflow:hidden;
}
#div1{width:50%;
height:300px;
background:blue;
padding-bottom:2000px;  margin-bottom:-2000px;
}
#div2{width:50%;
height:300px;
background:green;
padding-bottom:2000px;  margin-bottom:-2000px;
}

方法四：绝对定位

*{margin:0;
padding:0;
}
#div1{width:50%;
height:300px;
background:blue;
position:absolute;
left:0;
top:0;
}
#div2{width:50%;
height:300px;
background:green;
position:absolute;
transform:translate(100%, 0);
}

方法五：flex布局

#parent{display:flex;
}
#div1{width:50%;
height:300px;
background:blue;
flex:1;
}
#div2{width:50%;
height:300px;
background:green;
flex:1;
}

两个div并列一行显示的多种方法相关推荐

让两个div在一行显示，并加上颜色渐变边框
前言: 下面实现的效果是让一个大的div里的两个小div同行显示出来,并给它们加上颜色渐变边框,可以用来展示图片旁边配文字的样式. 清除浮动 div是块状元素,通常情况下独占一行,那么就需要使用flo ...
html中如何div转换下一行,css如何让两个div不换行显示？
css如何让两个div不换行显示?让两个div并列显示?下面本篇文章就来给大家介绍一下使用CSS让两个div并列在一行显示的方法,希望对大家有所帮助. 在HTML中,div是块状元素,div盒子本身默 ...
HTML如何让两个div并排在一行,怎么让两个div并排同行显示
如何让两个div并排同行显示前段时间在做界面的时候,想要实现个两个DIV并排的界面,做之前想着挺简单的,只要将一个div浮动就可以了.然后就测试了一下.下面是部分代码自己测试代码 DIV1 DI ...
行内元素，块级元素div在一行显示
行内元素,块级元素div在一行显示行内元素无法设置padding-top,padding-bottom,margin-top,margin-bottom,width,height:除非将行内元素改为 ...
QT界面中实现视频帧显示的多种方法及应用
QT界面中实现视频帧显示的多种方法及应用 (一) 引言 1.1 视频帧在QT界面中的应用场景 1.2 不同方法的性能和适用性分析 1.2.1 使用QLabel和QPixmap 1.2.2 使用QPai ...
让两个Div并排显示的多种方法
http://www.jb51.net/css/140705.html 让两个Div并排显示的方法有很多,使用display的inline属性.通过设置float来让Div并排显示都可以实现,感兴趣的 ...
css如何让两个div并列在同一行
让两个Div并排显示的方法有很多,使用display的inline属性.通过设置float来让Div并排显示都可以实现,感兴趣的朋友可以参考下本文让两个Div并排显示一.使用display的inl ...
CSS让2个DIV在同一行显示的解决方法
在CSS中,div属于块级元素,每个块级元素默认占一行高度,一行内添加一个块级元素后无法一般无法添加其他元素(float浮动后除外).两个块级元素连续编辑时,会在页面自动换行显示.所以默认情况下,2个 ...
如何让两个div处于一行
我们知道 div是块级元素,是独占一行的.一般情况下,两个相邻的div是不会处于一行的例如: Html代码 <!DOCTYPE html> <html> <head ...

两个div并列一行显示的多种方法

以下提供了5种实现两个div并列一行显示的方法，其中最常用的为浮动，还有定位等方法可以实现。

两个div并列一行显示的多种方法相关推荐

最新文章

热门文章