css布局：三列布局，中間內容優先載入

最後更新：2018-12-06 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

上周面試前端開發時候，遇到這樣的筆試題目，三列布局，中間內容優先載入，左右兩邊的div寬度都是200px。

我首先想到的是方法是：父級div相對定位，中間的div左右邊距都是210px；左右兩邊的div都絕對位置，分別位於左右兩邊。

在紙上寫完，我當時覺得沒啥問題啊，但是面試我的考官卻對這樣布局能否實現效果表示懷疑,當然他也不確定，可能他用的是其他方法。我回家後，試了一下，確實沒問題啊。。解決問題的方法又不是只有一個。。

<!doctype html><html><head><meta charset="utf-8"><title>三列布局，中間內容優先載入</title><style type="text/css">* { margin:0; padding:0; }.box { overflow:hidden; zoom:1; background:#ccc; position:relative; margin:0 auto; /* width:960px; 此處加入寬度即可變為固定式配置 */ }.center { background:yellow; margin:0 210px; }.left, .right { width:200px; position:absolute; top:0; }.left { background:red; left:0; }.right { background:blue; right:0; }</style></head><body><div class="box">    <div class="center">      <p>內容</p>      <p>&nbsp;</p>      <p>&nbsp;</p>      <p>&nbsp;</p>      <p>&nbsp;</p>      <p>&nbsp;</p>      <p>&nbsp;</p>      <p>&nbsp;</p>      <p>&nbsp;</p>      <p>&nbsp;</p>      <p>&nbsp;</p>      <p>&nbsp;</p>      <p>&nbsp;</p>      <p>&nbsp;</p>      <p>&nbsp;</p>      <p>&nbsp;</p>      <p>&nbsp;</p>      <p>內容</p>      <p>內容</p>    </div>    <div class="left">      <p>left</p>      <p>&nbsp;</p>      <p>&nbsp;</p>      <p>&nbsp;</p>      <p>left</p>      <p>&nbsp;</p>    </div>    <div class="right">        <p>right</p>      <p>&nbsp;</p>      <p>&nbsp;</p>      <p>right</p>      <p>right</p>    </div></div></body></html>

二、浮動的方法

<!doctype html><html><head><meta charset="utf-8"><title>三列布局，中間內容優先載入</title><style type="text/css">/* ——css reset—— */body { font:12px/1.5 Arial, Helvetica, sans-serif; }body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td { margin:0; padding:0; }h1, h2, h3, h4, h5, h6 { font-size:1em; }address, code, caption, th, cite, dfn, em, var { font-style:normal; }q:before, q:after { content:""; }table { border-collapse:collapse; border-spacing:0; }caption, th { text-align:left; }ins { text-decoration: none; }del { text-decoration: line-through; }fieldset, img { border:none; }legend { display:none; }input { vertical-align:middle; }ol, ul { list-style:none; }a:link, a:visited { }a:hover, a:focus, a:active { }.clearfix:after { content:""; height:0; visibility:hidden; display:block; clear:both; }.clearfix { zoom:1; }/*—–page css——*/.main { margin:0 auto; background:#ddd; /* width:950px 此處加入寬度即可變為固定式配置*/ }.col_main { float:left; width:100%; }.incol_main { margin:0 210px 0 260px; background:red; /*incol_main內容寬度可自動延展*/}.col_sub1 { background:yellow; width:250px; float:left; margin-left:-100%; }.col_sub2 { background:orange; width:200px; float:right; margin-left:-200px; }</style></head><body><div class="main clearfix"><div class="col_main">    <div class="incol_main">incol_main <br />      <br />      <br />      <br />      <br />      <br />      <br />      <br />      <br />      <br />      <br />    </div></div><div class="col_sub1">col_sub1<br />    <br />    <br />    <br />    <br />    <br />    <br /></div><div class="col_sub2">col_sub2<br />    <br />    <br />    <br />    <br />    <br />    <br /></div></div></body></html>

下面是網上搜的。

html代碼：

方法一：利用絕對位置方法(不推薦)

css部分：

body {margin: 0;padding: 0; height: 100%;}
#left,#right {position: absolute; top:0; width: 220px; height: 100%;background:pink;}
#left {left: 0;}
#right { right:0;}
#main {margin: 0 230px; height: 100%;}

這種方法是最簡單，也是麻煩最多的，如果中間欄含有最小寬度限制，或是含有寬度的內部元素，當瀏覽器寬度小到一定程度，會發生層重疊的情況。

方法二：採用的是浮動布局

css部分：

#left,#right { float: left; width: 220px; height: 200px; background: blue;}

#right { float: right;}

#main { margin: 0 230px;background: red; height: 200px;}

這種方法我利用的就是浮動原理，左右定寬度分別進行左浮動和右浮動，此時主內容列（中間列沒有定度）主會自動插入到左右兩列的中間，最要注意的一點是，中間列一定要放在左右兩列的後面

方法三：margin方法

css部分：

#left{ width:200px; float:left;margin-right:-200px; background-color:#FF9900}

#main{ width:auto;background:#00FF00;margin:0 220px;}

#right{ width:200px;margin-left:-200px; float:right; background-color:#CCCC00}

左右設定後，使用margin

方法四：個人感覺最簡單方法：

css部分：

#left{ width:200px; float:left;}

#mid{ width:auto;}

#right{ width:200px; float:right;}

中間使用width:auto;左右分別左右浮動

方法五：實現中間欄優先載入（重要部分優先載入）

html部分：

</div>

<div class="extra-2">extra</div>

css部分：

.main-2{ float:left; width:100%;margin-bottom:-3000px; padding-bottom:3000px;background:#F90;}

.main-wrap-2{ margin:0 200px 0 150px; }

.sub-2{ float:left; margin-left:-100%; width:150px; background:#6C0; margin-bottom:-3000px; padding-bottom:3000px;}

.extra-2{ float:left; margin-left:-200px; width:200px; background:#F9F; margin-bottom:-3000px; padding-bottom:3000px;}

優先載入關鍵在於重要內容在html裡面必須在前面，所有main部分移到了最上面

較完整內容可以參考——雙飛翼布局：

<div class="wrap-2">
         <div class="header">Header</div>
         <div class="body">
            <div class="main-2"><div class="main-wrap-2"><p>main-wrap</p><p>main-wrap</p></div></div>
            <div class="sub-2"><p>sub</p><p>sub</p><p>sub</p></div>
            <div class="extra-2"><p>extra</p><p>margin-left:350px; background:#CC0;margin-left:350px; background:#CC0;</p></div>
         </div>
         <div class="footer">Footer</div>
      </div>

方法六：中間欄優先載入，採用css3 方法：

[html]<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>自適應寬度，左右兩欄固定寬度，中間欄優先載入</title>
<style>
.container{
display:-moz-box;
display:-webkit-box;
}
div{
padding:10px;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
.sider_l{
width:250px;
-moz-box-ordinal-group:1;
-webkit-box-ordinal-group:1;
background:limegreen;
}
.middle_content{
-moz-box-flex:1;
-webkit-box-flex:1;
-moz-box-ordinal-group:2;
-webkit-box-ordinal-group:2;
background:lightpink;
}
.sider_r{
width:250px;
-moz-box-ordinal-group:3;
-webkit-box-ordinal-group:3;
background:green;
}
</style>
</head>

<body>
<div class="container">
<div class="middle_content">優先載入主內容區</div>
<div class="sider_l">左側邊欄</div>
<div class="sider_r">右側邊欄</div>
</div>
</body>
</html>
[/html]

方法七：中間欄優先載入position:absolute方法

<body>
<div class="content">
<div class="center-ct">
<div class="center">
center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center
</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More