對於 flex 彈性布局相信大家都有所瞭解，它是 css3 中的屬性，然而它具有一定的相容性問題。樓主前幾天面試時遇到了面試官需要設計一個兩列布局，我當然就說父元素 flex 吧哩吧啦，然而需要用基本的 css2 中的屬性布局，傻掉了。。。
要求：兩列布局，左邊定寬，右邊自適應
html 布局如下
<p id="father"> <p id="left">我是定寬左</p> <p id="right">我是自適應右</p></p>
1. flex 布局
#father{ display: flex; } #left{ background: red; height: 200px; width: 200px; } #right{ background: green; height: 200px; flex:1; }
2. css2 普通布局
<style> #left{ background: red; height: 200px; width: 200px; float:left; } #right{ background: green; height: 200px; margin-left:200px; } </style>
注意：
多欄版面配置時需要將浮動元素的 html 代碼寫在自適應元素的前面。如以下為三列布局的代碼：
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ padding: 0; margin: 0; } #p1{ width: 200px; height: 200px; background: red; float:left; } #p2{ margin-left: 200px; margin-right: 200px; height: 200px; background: green; } #p3{ width: 200px; height: 200px; background: red; float:right; } </style> </head><body><p id="box"> <p id="p1">我是左定寬</p> <p id="p3">我是中間自適應</p> <p id="p2">我是右定寬</p></p></body></html>
效果
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
