下面先看一段代码实例:

<!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. python文件操作--字符串替换

    如把test.txt文件的 所有 AAA 字符串 替换成 aaaaa with open('test.txt','+r') as f: t = f.read() t = d.replace('AAA' ...

  2. jQuery Easing 动画效果扩展 ,全屏滚动案例

    http://www.helloweba.com/view-blog-212.html $(element).animate({     height:500,     width:600     } ...

  3. jQuery easyui datagrid数据绑定

    1.绑定json数据 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&qu ...

  4. EDIUS设置自定义输出的方法

    在做后期视频剪辑时,往往根据需求,需要输出不同分辨率格式的视频文件,那在EDIUS中,如何自定义输出设置,使之符合自己的需要呢?下面小编就来详细讲讲EDIUS自定义输出的一二事吧. 当剪辑完影片,设置 ...

  5. 华东师大OJ：IP Address【IP地址转换】

    /*===================================== IP Address Time Limit:1000MS Memory Limit:30000KB Total Subm ...

  6. 分巧克力【来源：CSDN线上编程挑战赛】——递归，费波那奇数列，迭代

    /*====================================================================== 儿童节快到了,班长想要给班上的每个同学给一个巧克力, ...

  7. vs2010 clickone 工程安装后的路径 win7

    C:\Users\xuan\AppData\Local\Apps\2.0\DX16T5JV.MLO\1H1ZAND1.1ZY\test..tion_f74974f651f2573b_0001.0000 ...

  8. Mysql 排序优化与索引使用（转)

    为了优化SQL语句的排序性能,最好的情况是避免排序,合理利用索引是一个不错的方法.因为索引本身也是有序的,如果在需要排序的字段上面建立了合适的索引,那么就可以跳过排序的过程,提高SQL的查询速度.下面 ...

  9. Jar mismatch! Fix your dependencies的问题

    在开发Android项目的时候,有时需要引用多个项目作为library.在引用项目的时候,有时会出现“Jar mismatch! Fix your dependencies”错误. 这是因为两个项目的 ...

  10. CryptoAPI与openssl数字签名与验证交互

    昨天写过了RSA非对称加密解密的交互方式, 其实数字签名也是RSA非对称加密,只不过用私钥加密的,再加上个hash摘要 CryptoAPI与openssl RSA非对称加密解密(PKCS1 PADDI ...