直接貼代碼吧
先總結一下吧 有三種方法
一 最外層設置一個大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>