教程集 > CSS教程 > 正文 CSS布局自适应等分比例例子

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

发布时间：2019-10-24 编辑：jiaochengji.com

教程集为您提供CSS布局自适应等分比例例子等资源，欢迎您收藏本站，我们将为您提供最新的CSS布局自适应等分比例例子资源

布局自适应的方法本站整理了不少了，今天看到一站长写的一博客，下面整理起来和各位分享，希望对大家有帮助。

CSS等比例划分，在CSS布局中是比较重要的，下面分享几种常用方法和探讨一下兼容性。

一：浮动布局百分比

<table width="620" align="center" border="0" cellpadding="1" cellspacing="1" style="background:#FB7"> <tr> <td width="464" height="27" bgcolor="#FFE7CE"> 代码如下</td> <td width="109" align="center" bgcolor="#FFE7CE" style="cursor:pointer;" onclick="doCopy('copy1048')">复制代码</td> </tr> <tr> <td height="auto" colspan="2" valign="top" bgcolor="#FFFFFF" style="padding:10px;" class="copyclass" id=copy1048>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%;}
</td></tr></table>

该样式兼容性较好，但是无法实现当里面的列增多时比例也随着变化，必须手动修改，当然你也可以使用一个js来调整了。

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

参考之前写过的inline-block替换float的代码，使用该样式还可以实现布局居中等块级元素所具有的特性。

<table width="620" align="center" border="0" cellpadding="1" cellspacing="1" style="background:#FB7"> <tr> <td width="464" height="27" bgcolor="#FFE7CE"> 代码如下</td> <td width="109" align="center" bgcolor="#FFE7CE" style="cursor:pointer;" onclick="doCopy('copy3491')">复制代码</td> </tr> <tr> <td height="auto" colspan="2" valign="top" bgcolor="#FFFFFF" style="padding:10px;" class="copyclass" id=copy3491>.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;}
}
</td></tr></table>

三：display:table display:table-cell

我们知道表格可以根据内容进行划分，CSS也有一个样式是display:table来实现类似表格的布局，不过不支持IE8以下浏览器。

四：使用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;}

</td></tr></table>

该方法只适用于高级浏览器，IE10以下的还是算了。具体介绍

五：使用栅格化系统

例如Bootstrap的栅格化系统

<table width="620" align="center" border="0" cellpadding="1" cellspacing="1" style="background:#FB7"> <tr> <td width="464" height="27" bgcolor="#FFE7CE"> 代码如下</td> <td width="109" align="center" bgcolor="#FFE7CE" style="cursor:pointer;" onclick="doCopy('copy9477')">复制代码</td> </tr> <tr> <td height="auto" colspan="2" valign="top" bgcolor="#FFFFFF" style="padding:10px;" class="copyclass" id=copy9477><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 */
}
</td></tr></table>

缺点和第一个的float一样，需要根据列数来跳出宽度调整。

例子

</td></tr></table>

上中下三行布局，上下定高，中间栏自适应浏览器高度，且内容垂直居中

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

<head>

<title>上中下三行布局，上下定高，中间栏自适应浏览器高度，且内容垂直居中</title>

* {

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]>

#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="header">header</div>

</div>

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

</div>

</body>

</html>

</td></tr></table>

总结：

如果需要兼容IE6-IE7的，如果列数固定可以使用第一种和第二种。如果列数不固定，可以加少量js支持。

如果是只考虑移动的，考虑第三种，兼容性比下面的flex支持的比较好。

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

您可能感兴趣的文章：
CSS布局自适应模块等分比例的例子
 经验分享：CSS组合CLASS来完成网页布局风格
 DIV CSS网页布局对SEO优化有哪些影响
 css自适应左右两样布局实现
 js等比例缩放图片的实现方法
 jQuery实现等比例缩放大图片让大图片自适应页面布局
 CSS基本布局16例
 详解H5 活动页之移动端 REM 布局适配方法
 CSS3的display:box 比例均分的例子
 H5 活动页之移动端 REM 布局适配方法的分析

上一篇：CSS3中-webkit-overflow-scrolling: touch 的使用方法详解下一篇：不可不知的CSS小技巧

[关闭]

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

最近更新

浏览排行