當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

两列布局、三列适应布局、两列等高适应布局。

發布時間：2023/12/2 编程问答 31 豆豆

生活随笔收集整理的這篇文章主要介紹了两列布局、三列适应布局、两列等高适应布局。小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

一. 兩列布局：左側定寬、右側自適應。

四種方法：flex 、position、float和負外邊距、外邊距

1. 使用flex.

<!DOCTYPE html> <html> <head><meta charset="utf-8"><title></title><style type="text/css">*{margin:0;padding:0;}.main{display:flex;}.sitebar{flex:0 0 200px;order:-1; //order屬性用于更改在主軸方向上排列順序,order數值越小，排列越靠前，默認為0，可以為負數background-color: green;}.content{flex:1;background-color: red;}</style> </head> <body><div class="main"><div class="content">右側自適應區塊</div><div class="sitebar">左側定寬200px區塊</div></div> </body> </html>

2. 使用position，考慮了頁面優化，右側區域先加載。

<!DOCTYPE html> <html> <head><meta charset="utf-8"><title></title><style type="text/css">*{margin:0;padding:0;}.sitebar{width:200px;background-color: green;}.content{position: absolute;left: 200px;right:0;top:0;background-color: red;} </style> </head> <body><div class="content">右側自適應區塊</div><div class="sitebar">左側定寬200px區塊</div> </body> </html>

?3.?利用float和負外邊距

這里的100%是相對于父元素, margin-left的意思是子元素的左邊框距離父元素右邊框的距離，我這里沒考慮padding,border等因素哈

當設置left元素的margin-left:-100%;時，left元素的左邊框會與父元素的左邊框重合。

<!DOCTYPE html> <html> <head><meta charset="utf-8"><title></title><style type="text/css">*{margin: 0;padding:0;}.main {width: 100%;float:left;}.main .content {margin-left: 200px;background-color: red;}.sitebar {width: 200px;float: left;background-color: green;margin-left: -100%;}</style> </head> <body><div class="main"><div class="content">右側自適應區塊</div></div><div class="sitebar">左側定寬200px</div> </body> </html>

二、三列布局：左右定寬，中間自適應。

圣杯布局其實和雙飛翼布局是一回事。它們實現的都是三欄布局，兩邊的盒子寬度固定，中間盒子自適應，也就是我們常說的固比固布局。

三種方法：flex、絕對定位、使用負外邊距。

1. flex

<!DOCTYPE html> <html> <head><meta charset="utf-8"><title></title><style type="text/css">.body{display:flex;}.content{flex:1;background-color: green;}.nav, .ads{/*//設置兩個側邊欄寬度*/flex:0 0 200px;background-color: blue;}.nav {/* 把導航放到最左邊*/order:-1;background-color: grey;} </style> </head> <body><div class="body"><main class="content">center</main><nav class="nav">left</nav><aside class="ads">right</aside> </div></body> </html>

2. 絕對定位

<!DOCTYPE html> <html> <head><meta charset="utf-8"><title></title><style type="text/css">body {margin: 0px;}.left {background-color: red;width:100px;position: absolute;top: 0px;left:0px;}.center {background-color: grey;margin-left: 100px;margin-right: 100px;}.right {background-color: green;width:100px;position: absolute;top:0px;right:0px;} </style> </head> <body><div class="center">中間</div><div class="left">左列</div><div class="right">右列</div> </body> </html>

三、兩列等高布局。

利用padding-bottom的正值與margin-bottom的負值相互抵消即可，同時最外層設置overflow:hidden;即可

<!DOCTYPE html> <html> <head><meta charset="utf-8"><title></title><style type="text/css">.main {margin: 0 auto;overflow: hidden;width: 600px;}.left {background-color: red;width:300px;float:left;padding-bottom: 2000px;margin-bottom: -2000px;}.right {background-color: green;width:300px;float:left;padding-bottom: 2000px;margin-bottom: -2000px;} </style> </head> <body><div class="main"><div class="left"><p style="height:200px">left</p></div><div class="right"><p style="height:300px">right</p></div></div> </body> </html>

轉載于:https://www.cnblogs.com/sarah-wen/p/10770419.html

總結

以上是生活随笔為你收集整理的两列布局、三列适应布局、两列等高适应布局。的全部內容，希望文章能夠幫你解決所遇到的問題。

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