css各种通用布局的解决方案-幸凡学习网

css各种通用布局的解决方案

关注我吧

2013/6/17 15:22:44 阅读次数:12183Tags:css 布局解决方案

本文介绍 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 布局而已希望对大家有帮助！

大家有什么问题或技术上的想法可以在此与大家分享，也可以加入前端爱好者QQ群(141999928)一起学习进步：【幸凡前端技术交流群】

如需转载请注明出处:http://www.86y.org/art_detail.aspx?id=573【css各种通用布局的解决方案】幸凡学习网

如果您觉得本文的内容对您的学习有所帮助，捐赠与共勉，支付宝(左)或微信(右)