css设置两个div同高

2025-05-25 00:14:00

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>

css设置两个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>

css设置两个div同高

3、保存代码后使用浏览器打开。即可看到效果。

css设置两个div同高

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>

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢