您的位置：首页 > 网站优化 > css  >  CSS实现多列等宽的方法详解

CSS实现多列等宽的方法详解

 更新时间：2016年9月14日 14:19  点击：2200
多列等宽布局是非常的常用了，我们通常在开发的网页中用到了，下面来为各位介绍一个CSS实现多列等宽的方法，希望文章可以对各位有帮助．

实现方法有css与js三种方法了，下面我们一起来看看．

网页中多列等宽是很常见的布局，一般使用百分比的 width 属性即可轻松实现。


bgbk.org-20150125_1

 

但是我真正想要说得是，在不明确到底有多少元素的情况下实现多列等宽，比如网站的幻灯片导航：


bgbk.org-20150125_2

 

幻灯片导航的数量会随着幻灯片的数量变化，元素数量不是固定的。需要完全等宽，并且占满整个父级元素。


我想出了三种解决方案，下边分别介绍。

display: table-cell

第一种方法利用 display 属性的 table-cell 值，把元素变成表格，就可以等宽了。

<style type="text/css">
 .box {
  width: 600px;
 }
 
 .box div {
  color: #FFF;
  display: table-cell;
  height: 150px;
 }
</style>
<div class="box">
 <div style="background: #666;">
  <span>第1列  第1列  第1列  第1列</span>
 </div>
 <div style="background: #444;">
  <span>第2列  第2列  第2列  第2列</span>
 </div>
 <div style="background: #222;">
  <span>第3列  第3列  第3列  第3列</span>
 </div>
 <div style="background: #000;">
  <span>第4列  第4列  第4列  第4列</span>
 </div>
</div>
这种方法是比较好的，兼容到 IE8。

权衡兼容性和复杂程度之后我选择了这种方案。

box-flex

box-flex 属性是 CSS3 的新东西，他可以把父元素的宽度分配给子元素，就像分数一样。

假设一个容器的宽度是 1200px，里边有三个子元素。

如果三个子元素的 box-flex 属性都设置成 1，那么它们将平分 1200px，也就是每个元素会获得 400px 的宽度。

如果一个元素的 box-flex 属性设置成 2，其余的两个设置成 1，那么设置成 2 的元素将会有 600px 的宽度，设置成 1 的两个元素会有 300px 的宽度。

看到这里，就会发现 box-flex 属性实在是太好了有木有，用它实现多列等高轻而易举，而且非常好理解。

<style type="text/css">
 .box {
  width: 600px;
  display: -webkit-box;/* 注意这里 */
 }
 
 .box:after {
  content: '';
  height: 0;
  display: block;
  clear: both;
 }
 
 .box div {
  color: #FFF;
  box-flex: 1;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  height: 150px;
  float: none;
 }
</style>
<div class="box">
 <div style="background: #666;">
  <span>第1列</span>
 </div>
 <div style="background: #444;">
  <span>第2列</span>
 </div>
 <div style="background: #222;">
  <span>第3列</span>
 </div>
 <div style="background: #000;">
  <span>第4列</span>
 </div>
</div>
可惜这种方法兼容性不佳，只有 IE10+ 和 Chrome 等浏览器支持，但这么强大的属性还是了解一下比较好。

JavaScript

最后一种方法就不是纯 CSS 了，需要使用 JS 实现，这种方法兼容性最好，支持几乎目前所有浏览器，但是比较麻烦。

<style type="text/css">
 .box {
  width: 600px;
 }
 
 .box:after {
  content: '';
  height: 0;
  display: block;
  clear: both;
 }
 
 .box div {
  color: #FFF;
  height: 150px;
  float: left;
 }
</style>
<script>
 window.onload = function(){
  var box = document.getElementById( 'box' ),
   Elements = box.getElementsByTagName( 'div' ),
   width = box.currentStyle ? box.currentStyle['width'] : document.defaultView.getComputedStyle( box, false )['width'];
  width = parseInt( width );
  for( var i = Elements.length - 1; i >= 0; i-- ){
   Elements[i].style.width = width / Elements.length + 'px';
  };
 }
</script>
<div class="box" id="box">
 <div style="background: #666;">
  <span>第1列</span>
 </div>
 <div style="background: #444;">
  <span>第2列</span>
 </div>
 <div style="background: #222;">
  <span>第3列</span>
 </div>
 <div style="background: #000;">
  <span>第4列</span>
 </div>
</div>

[!--infotagslink--]

相关文章

  • php 中file_get_contents超时问题的解决方法

    file_get_contents超时我知道最多的原因就是你机器访问远程机器过慢，导致php脚本超时了，但也有其它很多原因，下面我来总结file_get_contents超时问题的解决方法总结。...2016-11-25

  • php语言实现redis的客户端

    php语言实现redis的客户端与服务端有一些区别了因为前面介绍过服务端了这里我们来介绍客户端吧，希望文章对各位有帮助。 为了更好的了解redis协议，我们用php来实现...2016-11-25

  • HTTP 408错误是什么 HTTP 408错误解决方法

    相信很多站长都遇到过这样一个问题，访问页面时出现408错误，下面一聚教程网将为大家介绍408错误出现的原因以及408错误的解决办法。 HTTP 408错误出现原因： HTT...2017-01-22

  • php抓取网站图片并保存的实现方法

    php如何实现抓取网页图片，相较于手动的粘贴复制，使用小程序要方便快捷多了，喜欢编程的人总会喜欢制作一些简单有用的小软件，最近就参考了网上一个php抓取图片代码，封装了一个php远程抓取图片的类，测试了一下，效果还不错分享...2015-10-30

  • jQuery+jRange实现滑动选取数值范围特效

    有时我们在页面上需要选择数值范围，如购物时选取价格区间，购买主机时自主选取CPU，内存大小配置等，使用直观的滑块条直接选取想要的数值大小即可，无需手动输入数值，操作简单又方便。HTML首先载入jQuery库文件以及jRange相关...2015-03-15

  • Android子控件超出父控件的范围显示出来方法

    下面我们来看一篇关于Android子控件超出父控件的范围显示出来方法，希望这篇文章能够帮助到各位朋友，有碰到此问题的朋友可以进来看看哦。 <RelativeLayout xmlns:an...2016-10-02

  • ps把文字背景变透明的操作方法

    ps软件是现在非常受大家喜欢的一款软件，有着非常不错的使用功能。这次文章就给大家介绍下ps把文字背景变透明的操作方法，喜欢的一起来看看。 1、使用Photoshop软件...2017-07-06

  • php中去除文字内容中所有html代码

    PHP去除html、css样式、js格式的方法很多，但发现，它们基本都有一个弊端：空格往往清除不了 经过不断的研究，最终找到了一个理想的去除html包括空格css样式、js 的PHP函数。...2013-08-02

  • intellij idea快速查看当前类中的所有方法(推荐)

    这篇文章主要介绍了intellij idea快速查看当前类中的所有方法,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2020-09-02

  • Mysql select语句设置默认值的方法

    1.在没有设置默认值的情况下： 复制代码 代码如下:SELECT userinfo.id, user_name, role, adm_regionid, region_name , create_timeFROM userinfoLEFT JOIN region ON userinfo.adm_regionid = region.id 结果：...2014-05-31

  • JS实现的简洁纵向滑动菜单(滑动门)效果

    本文实例讲述了JS实现的简洁纵向滑动菜单(滑动门)效果。分享给大家供大家参考，具体如下：这是一款纵向布局的CSS+JavaScript滑动门代码，相当简洁的手法来实现，如果对颜色不满意，你可以试着自己修改CSS代码，这个滑动门将每一...2015-10-21

  • js导出table数据到excel即导出为EXCEL文档的方法

    复制代码 代码如下: <!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 ht...2013-10-13

  • mysql 批量更新与批量更新多条记录的不同值实现方法

    批量更新mysql更新语句很简单，更新一条数据的某个字段，一般这样写：复制代码 代码如下:UPDATE mytable SET myfield = 'value' WHERE other_field = 'other_value';如果更新同一字段为同一个值，mysql也很简单，修改下where即...2013-10-04

  • ps怎么制作倒影 ps设计倒影的方法

    ps软件是一款非常不错的图片处理软件，有着非常不错的使用效果。这次文章要给大家介绍的是ps怎么制作倒影，一起来看看设计倒影的方法。 用ps怎么做倒影最终效果&#819...2017-07-06

  • js基础知识（公有方法、私有方法、特权方法）

    本文涉及的主题虽然很基础，在许多人看来属于小伎俩，但在JavaScript基础知识中属于一个综合性的话题。这里会涉及到对象属性的封装、原型、构造函数、闭包以及立即执行表达式等知识。公有方法 公有方法就是能被外部访问...2015-11-08

  • 安卓手机wifi打不开修复教程，安卓手机wifi打不开解决方法

    手机wifi打不开？让小编来告诉你如何解决。还不知道的朋友快来看看。 手机wifi是现在生活中最常用的手机功能，但是遇到手机wifi打不开的情况该怎么办呢?如果手机wifi...2016-12-21

  • PHP 验证码不显示只有一个小红叉的解决方法

    最近想自学PHP ，做了个验证码，但不知道怎么搞的，总出现一个如下图的小红叉，但验证码就是显示不出来，原因如下 未修改之前，出现如下错误； （1）修改步骤如下，原因如下，原因是apache权限没开， （2）点击打开php.int.， 搜索extension=ph...2013-10-04

  • c#中分割字符串的几种方法

    单个字符分割 string s="abcdeabcdeabcde"; string[] sArray=s.Split('c'); foreach(string i in sArray) Console.WriteLine(i.ToString()); 输出下面的结果: ab de...2020-06-25

  • js控制页面控件隐藏显示的两种方法介绍

    javascript控制页面控件隐藏显示的两种方法，方法的不同之处在于控件隐藏后是否还在页面上占位 方法一： 复制代码 代码如下: document.all["panelsms"].style.visibility="hidden"; document.all["panelsms"].style.visi...2013-10-13

  • 连接MySql速度慢的解决方法(skip-name-resolve)

    最近在Linux服务器上安装MySql5后，本地使用客户端连MySql速度超慢，本地程序连接也超慢。 解决方法：在配置文件my.cnf的[mysqld]下加入skip-name-resolve。原因是默认安装的MySql开启了DNS的反向解析。如果禁用的话就不能...2015-10-21