css设置两个div同高
1、方案1 使用display: -webkit-box;设置两个div自适应高度。
新建一个html文件，在html代码文件上输入一个父<div>并设置样式类为box，然后在这个父<div>里创建两个子<div>,最后给这两个子<div>添加类并添加内容。如图:
代码：
<div class="box">
<div class="left">第一个div<br /><br /><br /></div>
<div class="right">第二个div</div>
</div>
2、添加自动适应同高的css样式。
在<title>后面创建一个<style>,然后在<style>里对父<div>的box类添加display: -webkit-box;即可。为了能看到效果，在这里也对子<div>的类添加了边框样式。
代码：
<style type="text/css">
.box{
display: -webkit-box;
}
.left,.right {
padding: 5px;
border: 1px solid #333;
}
</style>
3、保存代码后使用浏览器打开。即可看到效果。
4、所有代码。可以直接复制所有代码到新建的html文件上粘贴保存后运行，即可看到<div>自动适应高度的效果。
所有代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css设置两个div自适应同高</title>
<style type="text/css">
.box{
display: -webkit-box;
}
.left,.right {
padding: 5px;
border: 1px solid #333;
}
</style>
</head>
<body>
<div class="box">
<div class="left">第一个div<br /><br /><br /></div>
<div class="right">第二个div</div>
</div>
</body>
</html>
1、新建一个html文件。如图
2、在html代码页面创建两个<div>,然后给这两个<div>添加样式类并添加内容。如图：
代码：
<div class="left">心心相惜<br /><br /><br /></div>
<div class="right">哈哈哈哈哈</div>
3、找到<title>，在这个<title>后面创建一个<style>,然后在这个<style>里设置两个<div>类的样式为display: table-cell;。为了能看到明显效果，同时给类 设置了边框。
代码：
<style>
.left,.right{
display: table-cell;
border:1px solid #333;
padding:5px
}
</style>
4、所有代码。可以直接复制所有代码到新建的html文件上粘贴保存后运行，即可看到<div>自动适应高度的效果。
所有代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css设置两个div自适应同高</title>
<style>
.left,.right{
display: table-cell;
border:1px solid #333;
padding:5px
}
</style>
</head>
<body>
<div class="left">心心相惜<br /><br /><br /></div>
<div class="right">哈哈哈哈哈</div>
</body>
</html>