前端页面中如何在窗口缩放时让两个div始终在同一行显示
直接贴代码吧
先总结一下吧 有三种方法
一 最外层设置一个大div 给这个大div固定的宽度和高度
给里面两个小div 设置浮动 设置宽高
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>两个DIV并排</title>
<style>
.div-a{ float:left;width:500px;height:100px;border:1px solid #F00;}
.div-b{ float:left;width:500px;height:100px;border:1px solid #000;}
</style>
</head>
<body>
<div style="min-width:1200px;height:200px">
<div class="div-a">第一个DIV盒子</div>
<div class="div-b">第二个DIV盒子</div>
</div>
</body>
</html>
二 最外层设置一个大div 给这个大div设置display:flex
给里面两个小div 设置浮动 设置宽高
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>两个DIV并排</title>
<style>
.div-a{ float:left;width:500px;height:100px;border:1px solid #F00;}
.div-b{ float:left;width:500px;height:100px;border:1px solid #000;}
</style>
</head>
<body>
<div style="display: flex">
<div class="div-a">第一个DIV盒子</div>
<div class="div-b">第二个DIV盒子</div>
</div>
</body>
</html>
三 给两个div的宽度都设置成百分比 在设置浮动即可
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>两个DIV并排</title>
<style>
.div-a{ float:left;width:49%;height:100px;border:1px solid #F00;}
.div-b{ float:left;width:49%;height:100px;border:1px solid #000;}
</style>
</head>
<body>
<div class="div-a">第一个DIV盒子</div>
<div class="div-b">第二个DIV盒子</div>
</body>
</html>
