浅谈实现两个div并列的多种方法

Love The Way You Lie 2022-09-29 14:50 192阅读 0赞

方法一：float

#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;
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，192人围观）

还没有评论，来说两句吧...

相关阅读

相关多种不同的 MySQL 的 SSL 配置浅谈

![951102e472a8b558a1a15648868bc358.jpeg][] MySQL 只支持 TLS v1.0，默认不支持主机名验证，所以你的证书可能是给db1.

水深无声/ 2024年03月24日 21:30/ 0 赞/ 68 阅读

相关浅谈getStackTrace()方法

缘起：今天看到有一个工具类中有一句： String msgToPrint = Thread.currentThread().getStackTrace()[``1

爱被打了一巴掌/ 2023年10月12日 19:52/ 0 赞/ 5 阅读

相关 php并列居中代码,CSS如何实现每两个图片并列居中

有一个div包裹住4个a标签，每个a标签下有一个img，请问怎么实现每两个图片并列居中？a标签中的数据是从后端读取出来的，所以没法儿做成两个div .parent \{ m

我就是我/ 2023年01月14日 04:51/ 0 赞/ 130 阅读

相关浅谈实现两个div并列的多种方法

方法一：float div1{ width:50%; height:300px; background:blue; float

Love The Way You Lie/ 2022年09月29日 14:50/ 0 赞/ 193 阅读

相关浅谈不使用第三个变量交换两个变量的值的方法

1、方法一：其他语言实现 a = 1; b = 2; a = b - a; // a = 1; b = 2 b = b - a; // a =

灰太狼/ 2022年06月17日 09:22/ 0 赞/ 171 阅读

相关两个div并列

div是块级元素，是独占一行的，一般情况下，两个相邻的div是不会处于一行的。（1）使用float div \{ float : lef

╰+哭是因爲堅強的太久メ/ 2022年06月08日 09:18/ 0 赞/ 211 阅读

相关 C++与java——浅谈两个数的交换问题

> > > > > > 在学习了C++后我所认为的排序，有几种方法。比如说，冒泡排序，选择排序，但是对于排序问题，还是没有自己可以拿来就用的方法。我于是想起了当时学

野性酷女/ 2022年05月26日 02:29/ 0 赞/ 107 阅读

相关【VueJS】一个vue文件中如何并列两个div

问题来源 ![这里写图片描述][70] 解决方案使用一个div包裹这些div ![这里写图片描述][70 1] [70]: /images/202205

悠悠/ 2022年05月24日 14:16/ 0 赞/ 465 阅读

相关多种方法实现div两列等高（收集整理）

HTML骨架 <div id="header">头部</div> <div id ="container"> <div class="mai

深碍√TFBOYSˉ_/ 2021年12月22日 09:15/ 0 赞/ 320 阅读

相关 toString()方法浅谈

toString()方法原本用来输出对象的完整信息---即对象的编码.如果不重写,输出的就是对象编码. package prepare1; class Boo

电玩女神/ 2021年12月15日 06:23/ 0 赞/ 381 阅读