html+css 常用布局 | 易学教程

1.中间固定宽度，两侧自适应 1.1  flex布局

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        html,body,div{            height: 100%;        }        .left {            background-color: #ccc;            flex:1;        }        .middle {            background-color: #75cc23;            flex:0 0 400px;        }        .right {            background-color: #cc3b38;            flex:1;        }        .con{            display: flex;            justify-content: center;        }    </style></head><body><div class="con">    <div class="left">    </div>    <div class="middle">    </div>    <div class="right">    </div></div></body>//也可以用这个样式

html,body,div{    height: 100%;}.left {    background-color: #ccc;    flex-grow:1;}.middle {    background-color: #75cc23;    width:400px;}.right {    background-color: #cc3b38;    flex-grow:1;}.con{    display: flex;    justify-content: center;}

1.2 calc+float<!DOCTYPE html>

<html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        html,body,div{            height: 100%;        }        .left,.right {            background-color: #ccc;            float: left;            width:calc((100% - 400px) / 2)        }        .middle {            background-color: #75cc23;            width:400px;            float:left;        }        .right {            background-color: #cc3b38;          　　　　 }    </style></head><body><div class="con">    <div class="left">    </div>    <div class="middle">    </div>    <div class="right">    </div></div></body></html>2.两边固定 中间自适应2.1浮动布局

<!DOCTYPE html><html><head>    <meta charset="utf-8" />    <title>title</title>    <style type="text/css">        .con div{            min-height: 200px;        }        .con .left{            float: left;            width: 300px;            background: #72f5ff;        }        .con .right{            float: right;            width: 300px;            background: #7aff73;        }        .con .middle{            background: #ff2d21;        }    </style></head><body><div class="con">    <div class="left"></div>    <div class="right"></div>    <div class="middle">    </div></div></body></html>2.2使用绝对定位

<!DOCTYPE html><html><head>    <meta charset="utf-8" />    <title>绝对定位布局</title>    <style type="text/css">        .con div{            position: absolute;            min-height: 200px;        }        .con .left{            left: 0;            width: 300px;            background: red;        }        .con .right{            right: 0;            width: 300px;            background: blue;        }        .con .middle{            left: 300px;            right: 300px;            background: pink;        }    </style></head><body><div class="con">    <div class="left"></div>    <div class="middle">        </div>    <div class="right"></div></div></body></html>2.3 flex布局

<!DOCTYPE html><html><head>    <meta charset="utf-8" />    <title>flex</title>    <style type="text/css">        .con{            min-height: 200px;            display: flex;        }        .con .left{            width: 300px;            background: red;        }        .con .right{            width: 300px;            background: blue;        }        .con .middle{            flex-grow: 1;            background: #ffa861;        }    </style></head><body><div class="con">    <div class="left"></div>    <div class="middle">    </div>    <div class="right"></div></div></body></html>

来源：https://www.cnblogs.com/-youth/p/11646843.html

标签

background

flex布局