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>自动适应高度的效果。所有代码：<!DOCTY霸烹钟爷PE 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>
