自己如何做團(tuán)購網(wǎng)站信息流廣告素材網(wǎng)站
本文節(jié)選自我的博客:實(shí)現(xiàn)兩欄布局的五種方式
- 💖 作者簡介:大家好,我是MilesChen,偏前端的全棧開發(fā)者。
- 📝 CSDN主頁:愛吃糖的貓🔥
- 📣 我的博客:愛吃糖的貓
- 📚 Github主頁: MilesChen
- 🎉 支持我:點(diǎn)贊👍+收藏??+留言📝
- 💬介紹:The mixture of WEB+DeepLearning+Iot+anything🍁
前言
實(shí)現(xiàn)兩欄布局也是一道經(jīng)典的面試題,兩欄布局即左邊固定右邊伸縮,要實(shí)現(xiàn)兩欄布局的方式超過十種了,下面舉例五種,用來拋磚引玉。
float+BFC
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>兩欄布局</title><style>/* 方法1 左元素固定寬度,向左浮動 右元素不設(shè)置寬度,會自動撐滿,重疊問題可使用BFC解決 *//* float讓元素脫離正常標(biāo)準(zhǔn)流控制,不再占有原來的位置,*//* overflow: hidden是關(guān)鍵,也可改成其他能觸發(fā)BFC均可解決 利用了BFC的特點(diǎn):`BFC` 的區(qū)域不會與浮動元素發(fā)生重疊 */.left {width: 200px;height: 100px;background-color: red;float:left;}.right {height: 200px;background-color: blue;overflow: hidden;}</style></head><body ><div class="outer"><div class="left">左側(cè)</div><div class="right">右側(cè)</div></div></body>
</html>
float+margin
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>兩欄布局</title><style>/* 方法2 左元素固定寬度,向左浮動 右元素不設(shè)置寬度,會自動撐滿,使用margin-left */.left {width: 200px;height: 100px;background-color: red;float:left;}.right {height: 200px;background-color: blue;margin-left: 200px;}</style></head><body ><div class="outer"><div class="left">左側(cè)</div><div class="right">右側(cè)</div></div></body>
</html>
flex
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>兩欄布局</title><style>/* 方法3 利用 `flex` 布局,左邊元素固定寬度,右邊的元素設(shè)置 `flex: 1` */.outer {display: flex;}.left {width: 200px;height: 100px;background: lightcoral;}.right {flex: 1;height: 200px;background: lightseagreen;}</style></head><body ><div class="outer"><div class="left">左側(cè)</div><div class="right">右側(cè)</div></div></body>
</html>
左側(cè)絕對定位
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>兩欄布局</title><style>/* 方法4 *//* 利用絕對定位,父級元素設(shè)為相對定位。左邊元素 `absolute` 定位,寬度固定。右邊元素的 `margin-left` 的值設(shè)為左邊元素的寬度值。 */.outer {position: relative;}.left {position: absolute;width: 200px;height: 100px;background: lightcoral;}.right {margin-left: 200px;height: 200px;background: lightseagreen;}</style></head><body ><div class="outer"><div class="left">左側(cè)</div><div class="right">右側(cè)</div></div></body>
</html>
右側(cè)絕對定位
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>兩欄布局</title><style>/* 方法5 *//* 利用絕對定位,父級元素設(shè)為相對定位。左邊元素寬度固定,右邊元素 `absolute` 定位, `left` 為寬度大小,其余方向定位為 `0` 。 也可以只設(shè)置left+top,但要記得設(shè)置寬高*/.outer {position: relative;}.left {width: 200px;height: 100px;background: lightcoral;}.right {position: absolute;left: 200px;top: 0;right: 0;bottom: 0;height: 200px;background: lightseagreen;}</style></head><body ><div class="outer"><div class="left">左側(cè)</div><div class="right">右側(cè)</div></div></body>
</html>
總結(jié)
- float+BFC:第一欄float:left; overflow: hidden; 清除浮動顯示第二欄
- float+margin:第一欄float:left;給第二欄設(shè)置margin-left
- flex:將第二欄flex設(shè)置為1
- 左邊絕對定位:第一欄絕地定位;第二欄margin-left
- 右邊絕對定位:第二欄絕對定位:left為第一欄的寬度;top: 0;left: 200px;right: 0;bottom: 0;
還有其他方式,比如 grid
、float+calc
、table+calc
就不一一舉例了。
感謝小伙伴們的耐心觀看,本文為筆者個人學(xué)習(xí)記錄,如有謬誤,還請告知,萬分感謝!如果本文對你有所幫助,還請點(diǎn)個關(guān)注點(diǎn)個贊~,您的支持是筆者不斷更新的動力!