首頁 > 開發者 > CSS

CSS布局自適應等分比例例子

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

CSS等比例劃分，在CSS布局中是比較重要的，下面分享幾種常用方法和探討一下相容性。

一：浮動布局+百分比

 代碼如下 複製代碼
emmet html代碼：ul.float-ul>li*5>.con>h3{等分標題}+p{等分內容等分內容}
.float-ul{width: 100%; overflow: hidden; zoom: 1;}
.float-ul li{float: left; width: 20%;}

該樣式相容性較好，但是無法實現當裡面的列增多時比例也隨著變化，必須手動修改，當然你也可以使用一個js來調整了。

二：行內元素（inline-block）+百分比

參考之前寫過的inline-block替換float的代碼，使用該樣式還可以實現布局置中等區塊層級元素所具有的特性。

 代碼如下 複製代碼
.inline-ul{font-size: 0; *word-spacing: -1px;}
.inline-ul li{display: inline-block; *display: inline; *zoom: 1; font-size: 14px; vertical-align: top; word-spacing: normal; letter-spacing: normal; width: 20%;}
@media screen and (-webkit-min-device-pixel-ratio:0){
.inline-ul{letter-spacing: -5px;}
}

三：display:table + display:table-cell

我們知道表格可以根據內容進行劃分，CSS也有一個樣式是display:table來實作類別似表格的布局，不過不支援IE8以下瀏覽器。

 代碼如下 複製代碼
.table-cell{display: table; width: 100%;}
.table-cell li{display: table-cell;}

四：使用css3 display:flex.

舊文法：

 代碼如下 複製代碼

.flex-ul{display: -webkit-box; display: box;}
.flex-ul li{-webkit-box-flex:1; box-flex:1;}
新文法：

.flex-ul{display:-webkit-flex; display: flex; width: 100%;}
.flex-ul li{-webkit-flex:1; flex:1;}

該方法只適用於進階瀏覽器，IE10以下的還是算了。具體介紹

五：使用柵格化系統

例如Bootstrap的柵格化系統

 代碼如下 複製代碼
<div class="container">
  <div class="row">
    <div class="col-md-3"></div>
    ...
  </div>
</div>
.col-md-3 { float:left; }
@media (min-width: 992px) {
  .col-md-3 { width: 25%; }
  /* 父級容器的3/12 */
}

缺點和第一個的float一樣，需要根據列數來跳出寬度調整。

例子

 代碼如下 複製代碼

<style type="text/css">
ul{list-style: none; margin: 0; padding: 0;}
.float-ul{width: 100%; overflow: hidden; zoom: 1;}
.float-ul li{float: left; width: 20%;}
.inline-ul{font-size: 0; *word-spacing: -1px;}
.inline-ul li{display: inline-block; *display: inline; *zoom: 1; font-size: 14px; vertical-align: top; word-spacing: normal; letter-spacing: normal; width: 20%;}
@media screen and (-webkit-min-device-pixel-ratio:0){
 .inline-ul{letter-spacing: -5px;}
}
.table-cell{display: table; width: 100%;}
.table-cell li{display: table-cell;}
.flex-ul{display:-webkit-flex; display: flex;  width: 100%;}
.flex-ul li{-webkit-flex:1; flex:1;}
/*.flex-ul{display: -webkit-box; display: box;}
.flex-ul li{-webkit-box-flex:1; box-flex:1;}*/
</style>
</head>
<body>
 ul.float-ul>li*5>.con>h3{等分標題}+p{等分內容等分內容}
 <h2>浮動+百分比</h2>
 <ul class="float-ul">
  <li>
   <div class="con">
    <h3>等分標題</h3>
    <p>等分內容等分內容</p>
   </div>
  </li>
  <li>
   <div class="con">
    <h3>等分標題</h3>
    <p>等分內容等分內容</p>
   </div>
  </li>
  <li>
   <div class="con">
    <h3>等分標題</h3>
    <p>等分內容等分內容</p>
   </div>
  </li>
  <li>
   <div class="con">
    <h3>等分標題</h3>
    <p>等分內容等分內容</p>
   </div>
  </li>
  <li>
   <div class="con">
    <h3>等分標題</h3>
    <p>等分內容等分內容</p>
   </div>
  </li>
 </ul>
 <h2>inline-block + 百分比</h2>
 <ul class="inline-ul">
  <li>
   <div class="con">
    <h3>等分標題</h3>
    <p>等分內容等分內容</p>
   </div>
  </li>
  <li>
   <div class="con">
    <h3>等分標題</h3>
    <p>等分內容等分內容</p>
   </div>
  </li>
  <li>
   <div class="con">
    <h3>等分標題</h3>
    <p>等分內容等分內容</p>
   </div>
  </li>
  <li>
   <div class="con">
    <h3>等分標題</h3>
    <p>等分內容等分內容</p>
   </div>
  </li>
  <li>
   <div class="con">
    <h3>等分標題</h3>
    <p>等分內容等分內容</p>
   </div>
  </li>
 </ul>
 <h2>table+table-cell</h2>
 <ul class="table-cell J_equalList">
  <li>
   <div class="con">
    <h3>等分標題</h3>
    <p>等分內容等分內容</p>
   </div>
  </li>
  <li>
   <div class="con">
    <h3>等分標題</h3>
    <p>等分內容等分內容</p>
   </div>
  </li>
  <li>
   <div class="con">
    <h3>等分標題</h3>
    <p>等分內容等分內容</p>
   </div>
  </li>
  <li>
   <div class="con">
    <h3>等分標題</h3>
    <p>等分內容等分內容</p>
   </div>
  </li>
  <li>
   <div class="con">
    <h3>等分標題</h3>
    <p>等分內容等分內容</p>
   </div>
  </li>
 </ul>
 <h2>flex</h2>
 <ul class="flex-ul">
  <li>
   <div class="con">
    <h3>等分標題</h3>
    <p>等分內容等分內容</p>
   </div>
  </li>
  <li>
   <div class="con">
    <h3>等分標題</h3>
    <p>等分內容等分內容</p>
   </div>
  </li>
  <li>
   <div class="con">
    <h3>等分標題</h3>
    <p>等分內容等分內容</p>
   </div>
  </li>
  <li>
   <div class="con">
    <h3>等分標題</h3>
    <p>等分內容等分內容</p>
   </div>
  </li>
  <li>
   <div class="con">
    <h3>等分標題</h3>
    <p>等分內容等分內容</p>
   </div>
  </li>
 </ul>
 <script type="text/javascript">
 window.onload = function(){
  function setequal(cls){
   var a = document.querySelectorAll(cls);
   for(var i = 0, l = a.length; i<l; i++){
    var b = a[i];
    var child = b.children;
    var c = child.length;
    for(var j = 0; j<c; i++){
     child[i].style.width = '20%';
    }
   }
   // var child = a.children;
   // for(var i = 0, l = child.length; i<l; i++){
   //  child[i].style.width = 100/l+"%";
   // }
  }
  // setequal('.J_equalList');
 }
  
</script>


上中下三行布局，上下定高，中間欄自適應瀏覽器高度，且內容垂直置中

 代碼如下 複製代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>上中下三行布局，上下定高，中間欄自適應瀏覽器高度，且內容垂直置中</title>

<style type="text/css">

* {

margin:0;

padding:0;

}

html,

body,

#box {

height:100%;

font:small/1.5 "宋體", serif;

}

body {

text-align:center;

}

#box {

text-align:left;

background:#666;

display:table;

width:80%;

margin:0 auto;

position:relative;

}

#box > div {

display:table-row;

}

#header,

#footer {

background:#fcc;

height:50px;

}

#main {

background:#ccf;

}

#main #wrap {

display:table-cell;

background:#ffc;

vertical-align:middle;

}

#text {

text-align:center;

}

</style>

<!--[if IE]>

<style type="text/css">

#header,

#footer {

width:100%;

z-index:3;

position:absolute;

}

#footer {

bottom:0;

}

#main {

height:100%;

z-index:1;

position:relative;

}

#main #wrap {

position:absolute;

top:50%;

width:100%;

text-align:left;

}

#main #text {

position:relative;

width:100%;

top:-50%;

background:#ccc;

}

</style>

<![endif]-->

</head>

<body>

<div id="box">

<div id="header">header</div>

<div id="main">

<div id="wrap">

<div id="text">

<p>內容內容</p>

<p>內容內容</p>

<p>內容內容</p>

<p>內容內容</p>

<p>內容內容</p>

<p>內容內容</p>

<p>內容內容</p>

<p>內容內容</p>

<p>內容內容</p>

<p>內容內容</p>

<p>內容內容</p>

<p>內容內容</p>

<p>內容內容</p>

<p>內容內容</p>

</div>

</div>

</div>

<div id="footer">footer</div>

</div>

</body>

</html>

總結：

如果需要相容IE6-IE7的，如果列數固定可以使用第一種和第二種。如果列數不固定，可以加少量js支援。

如果是只考慮移動的，考慮第三種，相容性比下面的flex支援的比較好。

如果單純的不考慮低版本瀏覽器的，可以考慮使用第四種。

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

相關關鍵詞：
css ellipsis css oblique css scheduler css selectors css alarms skin css lynda css
相關文章
css實現滑鼠滑過改變文字(中文變英文)
selenium使用Xpath+CSS+JavaScript+jQuery的定位方法（治療selenium各種定位不到，點...
使用CSS巧妙地製作背景色漸層動畫執行個體
詳解css display屬性中常見的四個屬性值用法（代碼執行個體）
CSS修改iframe內的樣式問題
如何用CSS改變上劃線、底線以及刪除線的顏色呢？

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： 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