本文介绍 css各种通用的布局的解决方案，一般布局有 两列右侧自适应布局、两列左侧自适应布、两列定宽布局等。为前端开发人员提供高效率高质量的前端页面开发解决方案，提高多人协作效率，也为非专业人员提供快速制作网页的解决方案！ 下面就一一介绍。
两列右侧自适应布局
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>两列右侧自适应布局</title>
<style type="text/css">html{_overflow-y:scroll;}/* 两列右侧自适应布局 */
.g-bd1{margin:0 0 10px;}
.g-sd1{position:relative;float:left;width:190px;margin-right:-190px;}
.g-mn1{float:right;width:100%;}
.g-mn1c{margin-left:200px;}
p {background:#FF0097;color:#fff;height:100px;padding:10px;}
.g-sd1 p {background:#4EB3B9;}
</style>
</head>
<body>
<div class="g-bd1 f-cb">
<div class="g-sd1">
<p>左侧定宽</p>
</div>
<div class="g-mn1">
<div class="g-mn1c">
<p>右侧自适应</p>
</div>
</div>
</div>
</body>
</html>
两列左侧自适应布局
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>两列左侧自适应布局</title>
<style type="text/css">
/* 两列右侧自适应布局 */
.g-bd2{margin:0 0 10px;}
.g-sd2{position:relative;float:right;width:230px;margin-left:-230px}
.g-mn2{float:left;width:100%;;}
.g-mn2c{margin-right:240px;}
p {background:#FF0097;color:#fff;height:100px;padding:10px;}
.g-sd2 p {background:#4EB3B9;}
</style>
</head>
<body>
<div class="g-bd2 f-cb">
<div class="g-mn2">
<div class="g-mn2c">
<p>左侧自适应</p>
</div>
</div>
<div class="g-sd2">
<p>右侧定宽</p>
</div>
</div>
</body>
</html>
两列定宽布局
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>两列定宽布局</title>
<style type="text/css">
/* 两列定宽布局 */
.g-bd{width:950px;margin:0 auto;}
.g-sd{float:right;width:230px;}
.g-mn{float:left;width:710px;}
p {background:#FF0097;color:#fff;height:100px;padding:10px;}
.g-sd p {background:#4EB3B9;}
</style>
</head>
<body>
<div class="g-bd f-cb">
<div class="g-mn">
<p>左侧定宽</p>
</div>
<div class="g-sd">
<p>右侧定宽</p>
</div>
</div>
</body>
</html>
三列中间自适应布局
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>三列中间自适应布局</title>
<style type="text/css">
/* 三列中间自适应布局 */
.g-bd5{margin:0 0 10px;}
.g-sd51,.g-sd52{position:relative;float:left;width:230px;margin:0 -230px 0 0;}
.g-sd52{float:right;width:190px;margin:0 0 0 -190px;}
.g-mn5{float:left;width:100%;}
.g-mn5c{margin:0 200px 0 240px;}
p {background:#FF0097;color:#fff;height:100px;padding:10px;}
.g-sd51 p{background:#E51400;}
.g-mn5c p {background:#4EB3B9;}
</style>
</head>
<body>
<div class="g-bd5 f-cb">
<div class="g-sd51">
<p>左侧定宽</p>
</div>
<div class="g-mn5">
<div class="g-mn5c">
<p>中间自适应</p>
</div>
</div>
<div class="g-sd52">
<p>右侧定宽</p>
</div>
</div>
</body>
</html>
三列左侧自适应布局
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>三列左侧自适应布局</title>
<style type="text/css">
/* 三列左侧自适应布局 */
.g-bd4{margin:0 0 10px;}
.g-sd41,.g-sd42{position:relative;float:right;width:190px;}
.g-sd41{width:230px;margin-left:10px;}
.g-mn4{float:left;width:100%;margin-right:-430px;}
.g-mn4c{margin-right:440px;}
p {background:#FF0097;color:#fff;height:100px;padding:10px;}
.g-sd41 p{background:#E51400;}
.g-mn4c p {background:#4EB3B9;}
</style>
</head>
<body>
<div class="g-bd4 f-cb">
<div class="g-mn4">
<div class="g-mn4c">
<p>左侧自适应</p>
</div>
</div>
<div class="g-sd41">
<p>右侧定宽</p>
</div>
<div class="g-sd42">
<p>右侧定宽</p>
</div>
</div>
</body>
</html>
三列右侧自适应布局
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>三列右侧自适应布局</title>
<style type="text/css">
/* 三列右侧自适应布局 */
.g-bd3{margin:0 0 10px;}
.g-sd31,.g-sd32{position:relative;float:left;width:230px;}
.g-sd31{width:190px;margin-right:10px;}
.g-mn3{float:right;width:100%;margin-left:-430px;}
.g-mn3c{margin-left:440px;}
p {background:#FF0097;color:#fff;height:100px;padding:10px;}
.g-sd31 p{background:#E51400;}
.g-mn3c p {background:#4EB3B9;}
</style>
</head>
<body>
<div class="g-bd3 f-cb">
<div class="g-sd31">
<p>左侧定宽</p>
</div>
<div class="g-sd32">
<p>左侧定宽</p>
</div>
<div class="g-mn3">
<div class="g-mn3c">
<p>右侧自适应</p>
</div>
</div>
</div>
</body>
</html>
好了，以上几种CSS 布局而已希望对大家有帮助！