CSS布局自适应等分比例例子

2016-03-02    编辑:restart     点击(
布局自适应的方法本站整理了不少了,今天看到一站长写的一博客,下面整理起来和各位分享,希望对大家有帮助。

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支持的比较好。

如果单纯的不考虑低版本浏览器的,可以考虑使用第四种。