2019獨角獸企業重金招聘Python工程師標準>>>

?1.margin負值實現左右兩列布局（左邊固定寬度，右邊自適應）代碼如下：

???? css代碼：

?????.main{
??????????? padding: 0 0 0 200px;
??????? }
??????? .left{
??????????? width: 200px;
??????????? height: 50px;
??????????? margin-left: -200px;
??????????? background-color: #8b4513;
??????????? float: left;
??????? }
??????? .right{
??????????? width: 100%;
??????????? height: 50px;
??????????? background-color: #f4a460;
??????????? float: left;
??????? }

???? html代碼：

?? ?? <div class="main">
????? ? <div class="left"></div>
????? ??<div class="right"></div>
????? </div>

?2.margin實現左中右三列布局（左右定寬，中間自適應）

?? ?css代碼：

?? ?? .left{
??????????? width: 200px;
??????????? height: 50px;
??????????? margin-left: -200px;
??????????? background-color: #8b4513;
??????????? float: left;
??????? }
??????? .content{
??????????? width: 100%;
??????????? height: 50px;
??????????? background-color: silver;
??????????? float: left;
??????? }
??????? .right{
??????????? width: 200px;
??????????? height: 50px;
??????????? margin-right: -200px;
??????????? background-color: #f4a460;
??????????? float: left;
??????? }

????? html代碼：

????? <div class="main">
???????? <div class="left"></div>
???????? <div class="content"></div>
???????? <div class="right"></div>
???? </div>

3.margin實現定位的效果

???? ?css代碼：

????? ?.demo1{
??????????? width: 300px;
??????????? height: 300px;
??????????? background-color: #8b4513;
??????? }
??????? .demo2{
??????????? width: 100px;
??????????? height: 100px;
??????????? background-color: silver;
??????????? margin-top: -200px;
??????????? margin-left: 100px;
??????? }

??????html代碼：

?????? <div class="demo1"></div>
????? ?<div class="demo2"></div>

轉載于:https://my.oschina.net/u/1403185/blog/311399

總結

以上是生活随笔為你收集整理的web前端技术杂谈--css篇(1)--浅谈margin(续)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。