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

Love The Way You Lie 2022-09-29 14:50 206阅读 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 条评论，206人围观）

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

相关阅读

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

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

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

相关 css实现两个div并列显示的多种方法介绍

![c4d5b7fe0c05b125fbb67f81c09d26c5.jpeg][] CSS是一种样式语言，其中,两个div并列的实现是很常见的需求，本文就来介绍一下css实

迈不过友情╰/ 2024年03月23日 00:21/ 0 赞/ 84 阅读

相关【Redis】浅谈INFO replication中的两个master_replid

首先说一下含义： master\_replid是master启动时生成的40位16进制的随机字符串，用来标识master节点 master\_repl\_offs

素颜马尾好姑娘i/ 2023年10月06日 13:34/ 0 赞/ 13 阅读

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

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

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

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

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

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

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

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

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

相关两个div并列

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

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

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

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

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

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

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

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

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

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

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