几种常见的css布局

流体布局

.left {
		float: left;
		width: 100px;
		height: 200px;
		background: red;
	}
.right {
		float: right;
		width: 200px;
		height: 200px;
		background: blue;
	}
.main {
		margin-left: 120px;
		margin-right: 220px;
		height: 200px;
		background: green;
	}
<div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="main"></div>
</div>

圣杯布局

.container {
    margin-left: 120px;
    margin-right: 220px;
    }
.main {
    float: left;
    width: 100%;
    height:300px;
    background: green;
    }
.left {
    position: relative;
    left: -120px;
    float: left;
    height: 300px;
    width: 100px;
    margin-left: -100%;
    background: red;
    }
.right {
    position: relative;
    right: -220px;
    float: right;
    height: 300px;
    width: 200px;
    margin-left: -200px;
    background: blue;
    }
<div class="container">
	<div class="main"></div>
	<div class="left"></div>
	<div class="right"></div>
</div>

双飞翼布局

.content {
    float: left;
    width: 100%;
    }
.main {
    height: 200px;
    margin-left: 110px;
    margin-right: 220px;
    background: green;
    }
.main::after {
    content: '';
    display: block;
    font-size:0;
    height: 0;
    zoom: 1;
    clear: both;
    }
.left {
    float:left;
    height: 200px;
    width: 100px;
    margin-left: -100%;
    background: red;
    }
.right {
    float: right;
    height: 200px;
    width: 200px;
    margin-left: -200px;
    background: blue;
    }
<div class="content">
    <div class="main"></div>
</div>
<div class="left"></div>
<div class="right"></div>


布局实现方式不限于一种,还有其他的实现方式

版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。

评论

精彩评论
  • 2019-04-03 09:00:13

    好久没看到这个内部样式了,以为记不住了,看到博主写的还能看得懂,证明还记得

  • 2019-04-03 21:26:42

    博主如果有空的话希望可以帮忙出个表格增删改查详解哇

  • 2019-04-04 09:03:59

    其实这个内部样式还可以 不是很难学,但博主还是挺厉害的

Top

分享: