1.float布局 (注意dom节点摆放的位置)
<style>
*{
margin: 0;
padding: 0;
}
.layout.float div{
height: 100px;
}
.layout.float .left{
float: left;
width: 300px;
background: red;
}
.layout.float .right{
float: right;
width: 300px;
background: blue;
}
.layout.float .center{
background: palegreen;
}
</style>
</head>
<body>
<div class="layout float">
<div class="left">
我是left
</div>
<div class="right">
我是right
</div>
<div class="center">
我是center
</div>
</div>
</body>
- absolute布局(注意父容器需要时relative布局）
<style>
*{
margin: 0;
padding: 0;
}
/* .layout{
margin-bottom: 150px;
} */
.layout.absolute {
position: relative;
}
.layout.absolute div{
height: 100px;
}
.layout.absolute .left{
position: absolute;
left: 0;
width: 300px;
background: red;
}
.layout.absolute .right{
position: absolute;
right: 0;
width: 300px;
background: blue;
}
.layout.absolute .center{
background: palegreen;
position: absolute;
left: 300px;
right: 300px;
}
</style>
</head>
<body>
<div class="layout absolute">
<div class="left">
我是left
</div>
<div class="center">
我是center
</div>
<div class="right">
我是right
</div>
</div>
</body>
- flex布局
<style>
*{
margin: 0;
padding: 0;
}
/* .layout{
margin-bottom: 150px;
} */
.layout.flex {
display: flex;
}
.layout.flex div{
height: 100px;
}
.layout.flex .left{
width: 300px;
background: red;
}
.layout.flex .right{
width: 300px;
background: blue;
}
.layout.flex .center{
flex: 1;
background: palegreen;
}
</style>
</head>
<body>
<div class="layout flex">
<div class="left">
我是left
</div>
<div class="center">
我是center
</div>
<div class="right">
我是right
</div>
</div>
</body>
4.table布局
<style>
*{
margin: 0;
padding: 0;
}
.layout.table {
display: table;
width: 100%;
}
.layout.table div{
height: 100px;
display: table-cell;
}
.layout.table .left{
width: 300px;
background: red;
}
.layout.table .right{
width: 300px;
background: blue;
}
.layout.table .center{
background: palegreen;
}
</style>
</head>
<body>
<div class="layout table">
<div class="left">
我是left
</div>
<div class="center">
我是center
</div>
<div class="right">
我是right
</div>
</div>
</body>
</html>
5.网格布局
<style>
*{
margin: 0;
padding: 0;
}
.layout.grid{
display: grid;
width: 100%;
grid-template-rows: 100px;
grid-template-columns: 300px auto 300px;
}
.layout.grid .left{
background: red;
}
.layout.grid .right{
background: blue;
}
.layout.grid .center{
background: palegreen;
}
</style>
</head>
<body>
<div class="layout grid">
<div class="left">
我是left
</div>
<div class="center">
我是center
</div>
<div class="right">
我是right
</div>
</div>
</body>
