下面先看一段代码实例:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>蚂蚁部落</title>
<style type="text/css">
.parent{
  width:480px;
  height:100px;
  border:1px solid red;
  overflow:hidden;
}
.parent div{
  width:100px;
  height:100px;
  background-color:green;
  margin-left:20px;
  float:left;
}
</style>
</head>
<body>
<div class="parent">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
</body>

</html>

以上代码虽然均匀分布了，但是左侧由于外边距的原因，不能够贴到父元素的内壁，不能够满足我们的效果，代码修改如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>蚂蚁部落</title>
<style type="text/css">
.parent{
  width:460px;
  height:100px;
  border:1px solid red;
  overflow:hidden;
}
.wrap{
  width:480px;
  height:100px;
  overflow:hidden
}
.parent .wrap div{
  width:100px;
  height:100px;
  background-color:green;
  margin-right:20px;
  float:right;
}
</style>
</head>
<body>
<div class="parent">
<div class="wrap">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
</div>
</body>
</html>

以上代码实现了想要的效果。方法就是在水平排列的div的外层再嵌套一个div，并将此div的宽度设置为480px，这样不会导致水平排列的div出现 换行。最外层的div设置宽度为460，并且将overflow属性值设置为hidden，这样就可以将右侧的margin-right区域给隐藏掉，于 是实现了我们想要的效果。

如何实现多个div水平均匀排列且量两端贴壁的更多相关文章

  1. 元素均匀排列自动换行&二维数组前端遍历

    1.元素均匀排列并自动换行 display:flex; flex-wrap:wrap; 2.getFiled();取一行,取多行的话用getFiled(‘id’,true); 3.二维数组前端遍历: ...

  2. CSS实现DIV水平自适应居中

    DIV水平自适应居中 <!DOCTYPE html> <html lang="cn"> <head> <meta charset=&quo ...

  3. 让DIV水平和垂直居中的几种方法

    我们在设计页面的时候,经常要把DIV居中显示,而且是相对页面窗口水平和垂直方向居中显示,如让登录窗口居中显示.我们传统解决的办法是用纯CSS来让DIV居中.在本文中,我将给大家讲述如何用CSS和jQu ...

  4. 如何让div水平垂直居中

    引子 我们经常遇到需要把div中的内容进行水平和垂直居中.所以,这里介绍一种方法,可以使div水平居中和垂直居中. 代码: <!DOCTYPE html> <html lang=&q ...

  5. 【转】如何让DIV水平和垂直居中

    来源:http://blog.163.com/www.wxs_123/blog/static/82784664201321831746921/ 我们在设计页面的时候,经常要把DIV居中显示,而且是相对 ...

  6. 文字以及div水平垂直居中

    文字以及div水平垂直居中.md <div class=”content”> <div class=”mydiv”> huangyingnin! </div>< ...

  7. 【笔记】让DIV水平垂直居中的两种方法

    今天写的了百度前端学院春季班的任务:定位和居中问题  由于距离上次学习CSS有点久远了,加上以前木有记笔记的习惯,方法忘得只剩下一种,今天通过网上查阅资料总结了以下两种简单的方法让DIV水平垂直居中. ...

  8. DIV水平和垂直居中的实现

    在div的宽度和高度固定的情况下,实现div水平和垂直居中普遍采用如下的方式: <!DOCTYPE html> <html> <head> <style ty ...

  9. CSS：使用CSS3将一个div水平和垂直居中显示

    使用css3将一个div水平和垂直居中显示 方案一: div绝对定位水平垂直居中[margin:auto实现绝对定位元素的居中], 代码两个关键点:1.上下左右均0位置定位: 2.margin: au ...

随机推荐

  1. jQuery对下拉框Select操作总结

    jQuery对下拉框Select操作总结 转自网络,留做备用 jQuery获取Select元素,并选择的Text和Value: 1. $("#select_id").change( ...

  2. (转) Learning from Imbalanced Classes

    Learning from Imbalanced Classes AUGUST 25TH, 2016 If you’re fresh from a machine learning course, c ...

  3. 论文阅读之　A Convex Optimization Framework for Active Learning

    A Convex Optimization Framework for Active Learning Active learning is the problem of progressively ...

  4. lucene 检索流程整理笔记

  5. LINUX系统下PHP显示空白页

    因为手工转移,文件所属用户及用户组是root,所以需要把网站程序及数据库都改成对应用户组:如www和mysql. 更改目录所属用户执行命令: chown -R 用户.用户组 目录名, 如:chown ...

  6. Innodb锁机制：Next-Key Lock 浅谈（转)

    http://www.cnblogs.com/zhoujinyi/p/3435982.html 数据库使用锁是为了支持更好的并发,提供数据的完整性和一致性.InnoDB是一个支持行锁的存储引擎,锁的类 ...

  7. oracle group by中cube和rollup字句的使用方法及区别

    oracle group by中rollup和cube的区别:  Oracle的GROUP BY语句除了最基本的语法外,还支持ROLLUP和CUBE语句. 如果是ROLLUP(A, B, C)的话,先 ...

  8. Newtonsoft.Json学习笔记

    Newtonsoft.Json,一款.NET中开源的Json序列化和反序列化类库(下载地址http://json.codeplex.com/). 下面是Json序列化和反序列化的简单封装: /// & ...

  9. Python(迭代器 生成器 装饰器 递归 斐波那契数列)

    1.迭代器 迭代器是访问集合元素的一种方式.迭代器对象从集合的第一个元素开始访问,直到所有的元素被访问完结束.迭代器只能往前不会后退,不过这也没什么,因为人们很少在迭代途中往后退.另外,迭代器的一大优 ...

  10. LintCode "Number of Islands II"

    A typical Union-Find one. I'm using a kinda Union-Find solution here. Some boiler-plate code - yeah ...