自己如何做團(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)個贊~，您的支持是筆者不斷更新的動力！