前端页面中如何在窗口缩放时让两个div始终在同一行显示

时间:2021-11-21 14:59:02

直接贴代码吧

先总结一下吧  有两种方法

一    最外层设置一个大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>