html布局(两列布局的常见方式)
生活随笔
收集整理的這篇文章主要介紹了
html布局(两列布局的常见方式)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
描述:當前端開發者拿到ui設計稿，首先實現的便是頁面布局；本節介紹常見的幾種布局方式；當然這些布局方式不僅僅用來做整個頁面的布局，在某個彈窗或者工具欄中都可以使用
1 兩列自適應布局
1.1 第一個div浮動，第二個div用margin-left的方式
首先寫如下兩個div,設置一樣高度，然后效果如下:
<!DOCTYPE html> <html> <head><title>html布局(兩欄布局和三欄布局的常見方式)</title><style type="text/css">.left{height:120px;background: pink;}.right{height:120px;background: gray;}</style> </head> <body><div class="left">左欄</div><div class="right">右欄</div> </body> </html>這里運行效果是為了強調一下，div等塊狀元素寬度默認值是100%;
言歸正傳;左邊設置左浮動，下面div會浮動在下面，然后設置左側margin-left即可實現如下效果:
.left{float:left;width:200px;height:120px;background: pink; } .right{margin-left:200px;height:120px;background: gray; }?
?
1.2 第一個div浮動，第二個用overflow:hidden的方式
.left{float:left;width:200px;height:120px;background: pink; } .right{overflow: hidden;height:120px;background: gray; }1.3 借助display:table實現；該css屬性，你可以理解為沒有邊框的表格，里面的元素都可以理解為table的單元格內容
<!DOCTYPE html> <html> <head><title>html布局(兩欄布局和三欄布局的常見方式)</title><style type="text/css">.box{display:table;width: 100%;}.left{display:table-cell;width:200px;height:120px;background: pink;}.right{display:table-cell;height:220px;background: gray;}</style> </head> <body><div class="box"><div class="left">左欄</div><div class="right">右欄</div></div> </body> </html>上面三種是兩列自適應布局的常用方式；平時工作中可以自行選取；
應用場景不限于整個網頁，比如彈窗窗口頂部的標題欄，也可以采取上面方式；熟練使用后，可以大大提高效率
這里再強調一個點；還是第一個div浮動，如果兩個div高度不同，效果如下
.left{float:left;width:200px;height:120px;background: pink; } .right{height:220px;background: gray; }很明顯，后面div移動到了浮動div的下面，被覆蓋；但是div的文字卻沒有被覆蓋，而是自動避開；這里需要特別注意；以后布局可以加以利用；
一切的細節知識，都會在未來某個點幫你節省效率和提升好心情。
2 三欄布局
三欄布局請見雙飛翼和圣杯布局一節?http://xiaobaigis.com/Home/WebArticle?ID=9
總結
以上是生活随笔為你收集整理的html布局(两列布局的常见方式)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 余额宝收益计算程序
- 下一篇： 郁闷的win7 断电 +东芝笔记本L60