利用margin-bottom和padding-bottom
<!DOCTYPE html>
<html>
<head>
<title>并排等高</title>
<style>
*{
margin: 0;
padding: 0;
}
.container::after{
display: block;
content: "";
height: 0;
visibility: hidden;
clear: both;
}
.container{
overflow: hidden;
}
.left, .right{
width: 100px;
float: left;
padding-bottom: 1000px;
margin-bottom: -1000px;
}
.left{
background-color: red;
}
.right{
background-color: black;
}
</style>
</head>
<body>
<div class="container">
<div class="left">
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
</div>
<div class="right">
<p>1</p>
</div>
</div>
</body>
</html>
设为table-ceil
<!DOCTYPE html>
<html>
<head>
<title>并排等高</title>
<style>
*{
margin: 0;
padding: 0;
}
.container::after{
display: block;
content: "";
height: 0;
visibility: hidden;
clear: both;
}
.container{
}
.left, .right{
width: 100px;
display: table-cell;
}
.left{
background-color: red;
}
.right{
background-color: black;
}
</style>
</head>
<body>
<div class="container">
<div class="left">
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
</div>
<div class="right">
<p>1</p>
</div>
</div>
</body>
</html>
flex
父级元素设为flex
align-items:stretch也行