css2實現兩列三列布局的方法

來源：懂視網責編：小采時間：2020-11-27 18:50:03

css2實現兩列三列布局的方法

css2實現兩列三列布局的方法:前言對于 flex 彈性布局相信大家都有所了解，它是 css3 中的屬性，然而它具有一定的兼容性問題。樓主前幾天面試時遇到了面試官需要設計一個兩列布局，我當然就說父元素 flex 吧哩吧啦，然而需要用基本的 css2 中的屬性布局，傻掉了。要求：兩列布局，左邊

推薦度：

點擊下載本文 文檔為doc格式

導讀css2實現兩列三列布局的方法:前言對于 flex 彈性布局相信大家都有所了解，它是 css3 中的屬性，然而它具有一定的兼容性問題。樓主前幾天面試時遇到了面試官需要設計一個兩列布局，我當然就說父元素 flex 吧哩吧啦，然而需要用基本的 css2 中的屬性布局，傻掉了。要求：兩列布局，左邊

前言

對于 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>

效果如圖：

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

css2實現兩列三列布局的方法

推薦度：

點擊下載本文 文檔為doc格式

標簽：方法實現布局

熱門焦點

css2實現兩列三列布局的方法

css2實現兩列三列布局的方法

css2實現兩列三列布局的方法

最新推薦

猜你喜歡

熱門推薦