css实现两个div并排等高

最新推荐文章于 2023-07-13 16:30:58 发布

weixin_33896726

最新推荐文章于 2023-07-13 16:30:58 发布

阅读量237

点赞数

文章标签： python

原文链接：https://my.oschina.net/shuaihong/blog/1628187

版权

2019独角兽企业重金招聘Python工程师标准>>>

<!-- 方法一 使用table-cell等高 -->
<!-- <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
        .left,
        .right {
        	width: 200px;
            padding: 10px;
            display: table-cell;
        }
        .left {
        	background-color: red;
        }
        .right {
        	background-color: blue;
        }
    </style>
</head>
<body>
	<div class="wrap">
	    <div class="left">
	        left
	        <br/>
	        <br/>
	        <br/>
	        <br/>
	        <br/>
	    </div>
	    <div class="right">
	    	right
	    </div>
	</div>
</body>
</html> -->


<!-- 方法二 使用display:flex -->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.wrap {   
			display: flex;
		}
        .left,.right {
        	width: 200px;
            padding: 10px;
        }
        .left {
        	background-color: red;
        }
        .right {
        	background-color: blue;
        }
    </style>
</head>
<body>
	<div class="wrap">
	    <div class="left">
	        left
	        <br/>
	        <br/>
	        <br/>
	        <br/>
	        <br/>
	    </div>
	    <div class="right">
	    	right
	    </div>
	</div>
</body>
</html>

效果展示：输入图片说明