MENU

前端设计DIV+CSS自适应布局

一、两栏布局-左定宽,右自动

1.float+margin

即固定宽度元素设置float属性为left,自适应元素设置margin属性,margin-left>=定宽元素宽度。
DOMO
HTML代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>两栏布局-左定宽,右自动</title>
    <style type="text/css">
        html,body,div{
            margin:0;
            padding:0;
        }
        .wrap{
            margin:10px;
        }
        .wrap_left{
            float: left;
            width: 200px;
            background-color: red;
        }
        .wrap_right{
            margin-left: 220px;
            background-color: green;
        }
    </style>
</head>
<body>
<div class="wrap">
    <div class="wrap_left">
        我是左栏
    </div>
    <div class="wrap_right">
        我是右栏
    </div>
</div>
</body>
</html>

2.position+margin

即在父标签设置position属性为relative;子标签中定宽元素设置position属性为absolute;自适应元素设置margin属性,margin-left>=定宽元素宽度。
DOMO
HTML代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>两栏布局-左定宽,右自动</title>
    <style type="text/css">
    html,body,div{
        margin: 0;
        padding: 0;
    }
    .wrap{
        margin: 10px;
        position: relative;
    }
    .wrap_left{
        position: absolute;
        width: 200px;
        background-color: red;
    }
    .wrap_right{
        margin-left: 220px;
        background-color: green;
    }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="wrap_left">
            我是左栏
        </div>
        <div class="wrap_right">
            我是右栏
        </div>
    </div>
</body>
</html>

3.float+负margin

即给自适应宽度元素定义一个父标签,并设置float属性为left;width为100%;自适应宽度元素设置margin,margin-left应>=定宽元素宽度;固定宽度元素设置margin-left属性为负值:-100%;除此之外应注意HTML结构中应先写自适应元素,再写固定宽度元素。
注:使用的float属性,必要时清除一下浮动。
DOMO
HTML代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>两栏布局-左定宽,右自动</title>
    <style type="text/css">
    html,body,div{
        margin: 0;
        padding: 0;
    }
    .wrap{
        float: left;
        width: 100%;
    }
    .wrap .wrap_right{
        margin-left: 220px;
        background-color: green;
    }
    .wrap_left{
        float: left;
        width: 200px;
        margin-left: -100%;
        background-color: red;
    }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="wrap_right">
            我是右栏
        </div>
    </div>
       <div class="wrap_left">
            我是左栏
    </div>
</body>
</html>

4.用table布局

注:使用tableb布局,一定要设置高度。
DOMO
HTML代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>两栏布局-左定宽,右自动</title>
    <style type="text/css">
    html,body,table {
        margin: 0;
        padding: 0;
    }
    </style>
</head>
<body>
    <table width="100%" cellspacing="0" cellpadding="0" border="1" height="300">
    <tr>
        <td width="200" bgcolor="red"></td>
        <td bgcolor="green"></td>
    </tr>
</table>
</body>
</html>

5.触发BFC

关于BFC是什么、怎么触发BFC以及BFC可以用来做什么,大家可以看看这篇文章-前端精选文摘:BFC神奇背后的原理实现方法,即为定宽元素设置float:left;自适应宽度元素设置可以触发BFC的属性。
DOMO
HTML代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>两栏布局-左定宽,右自动</title>
    <style type="text/css">
    html,body,div{
        margin: 0;
        padding: 0;
    }
    .wrap_left{
        float: left;
        width: 200px;
        background-color: red;
    }
    .wrap_right{
        overflow: hidden;
        background-color: green;
    }
    </style>
</head>
<body>
    <div class="wrap_left">
        我是左栏
    </div>
    <div class="wrap_right">
        我是右栏
    </div>
</body>
</html>

6.flex伸缩盒

即父标签设置display:flex属性,自适应元素设置flex-grow:1。
DOMO
HTML代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>两栏栏布局-左定宽,右自动</title>
    <style type="text/css">
    html,body,div{
        margin: 0;
        padding: 0;
    }
    .wrap{
        display: flex;
        display: -webkit-flex;
    }
    .wrap_left{
        width: 200px;
        background-color: red;
    }
    .wrap_right{
        flex-grow:1;
        -webkit-flex-grow:1;
        background-color: green;
    }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="wrap_left">
            我是左栏
        </div>
        <div class="wrap_right">
            我是右栏
        </div>
    </div>
</body>
</html>

二、三栏布局

1.float+margin(两侧定宽,中间自适应)

DOMO
HTML代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三栏布局-两侧定宽,中间自适应</title>
    <style type="text/css">
    html,body,div{
        margin: 0;
        padding: 0;
    }
    .wrap_left{
        width: 200px;
        float: left;
        background-color: red;
    }
    .wrap_content{
        margin-left: 220px;
        margin-right: 220px;
        background-color: yellow;
    }
    .wrap_right{
        width: 200px;
        float: right;
        background-color: green;
    }
    </style>
</head>
<body>
    <div class="wrap_left">
        我是左栏
    </div>
    <div class="wrap_right">
        我是右栏
    </div>
    <div class="wrap_content">
        我是中间栏
    </div>
</body>
</html>

2.position+margin(两侧定宽,中间自适应)

DOMO
HTML代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>三栏布局-两侧定宽,中间自适应</title>
    <style type="text/css">
    html,body,div{
        margin: 0;
        padding: 0;
    }
    .wrap_left{
        width: 200px;
        position: absolute;
        background-color: red;
        left: 0;
    }
    
    .wrap_content{
        margin-left: 220px;
        margin-right: 220px;
        background-color: yellow;
    }
    .wrap_right{
        width: 200px;
        position: absolute;
        right: 0;
        background-color: green;
    }
    </style>
</head>
<body>
    <div class="wrap_left">
        我是左栏
    </div>
    <div class="wrap_right">
        我是右栏
    </div>
    <div class="wrap_content">
        我是中间栏
    </div>
</body>
</html>

3.float + 负margin(两侧定宽,中间自适应)

DOMO
HTML代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三栏布局-两侧定宽,中间自适应</title>
    <style type="text/css">
    html,body,div{
        margin: 0;
        padding: 0;
    }
    .wrap{
        float: left;;
        width: 100%;
    }
    .wrap_left{
        width: 200px;
        float: left;
        margin-left: -100%;
        background-color: red;
    }
    .wrap_content{
        margin-left: 220px;
        margin-right: 220px;
        background-color: yellow;
    }
    .wrap_right{
        width: 200px;
        float: left;
        margin-left: -200px;
        background-color: green;
    }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="wrap_content">
            我是中间栏
        </div>
    </div>
    <div class="wrap_left">
        我是左栏
    </div>
    <div class="wrap_right">
        我是右栏
    </div>
</body>
</html>

4.table实现

DOMO
HTML代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三栏布局-两侧定宽,中间自动</title>
    <style type="text/css">
    html,body,table{
        margin: 0;
        padding: 0;
    }
    </style>
</head>
<body>
    <table width="100%" cellspacing="0" cellpadding="0" border="1" height="300">
    <tr>
        <td width="200" bgcolor="red"></td>
        <td bgcolor="yellow"></td>
        <td width="200" bgcolor="green"></td>
    </tr>
    </table>
</body>
</html>

5.BFC实现

<span class=bgc>注</span>:HTML中先写定宽元素,再写自适应宽度元素。
DOMO
HTML代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三栏布局-两侧定宽,中间自动</title>
    <style type="text/css">
    html,body,div{
        margin: 0;
        padding: 0;
    }
    .wrap_left{
        float: left;
        width: 200px;
        background-color: red;
    }
    .wrap_right{
        float: right;
        width: 200px;
        background-color: green;
    }
    .wrap_content{
        overflow: hidden;
        background-color: yellow;
    }
    </style>
</head>
<body>
    <div class="wrap_left">
        我是左栏
    </div>
    <div class="wrap_right">
        我是右栏
    </div>
    <div class="wrap_content">
        我是中间栏
    </div>
</body>
</html>

6.flex伸缩盒

即父标签设置display:flex属性,自适应元素设置flex-grow:1。
DOMO
HTML代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三栏布局-两侧定宽,中间自动</title>
    <style type="text/css">
    html,body,div{
        margin: 0;
        padding: 0;
    }
    .wrap{
        display: flex;
        display: -webkit-flex;
    }
    .wrap_left{
        width: 200px;
        background-color: red;
    }
    .wrap_right{
        width: 200px;
        background-color: green;
    }
    .wrap_content{
        flex-grow:1;
        -webkit-flex-grow:1;
        background-color: yellow;
    }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="wrap_left">
            我是左栏
        </div>
        <div class="wrap_content">
            我是中间栏
        </div>
        <div class="wrap_right">
            我是右栏
        </div>
    </div>
</body>
</html>
最后编辑于: 2018 年 04 月 16 日
返回文章列表 文章二维码
本页链接的二维码
打赏二维码