下面先看一段代码实例:

<!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. 【转】iOS 删除已经配置的类库和移除CocoaPods

    原文网址:http://www.jianshu.com/p/552f21a989ba 引言 我们使用CocoaPods非常高效地将一些第三方类库导入到我们的项目中,但是不由得产生一个疑问:如果发现某个 ...

  2. Qt消息机制和事件(一)

    一,事件 事件(event)是由系统或者 Qt 本身在不同的时刻发出的.当用户按下鼠标.敲下键盘,或者是窗口需要重新绘制的时候,都会发出一个相应的事件.一些事件在对用户操作做出响应时发出,如键盘事件等 ...

  3. dede模板完全控制攻略

    1.使用php代码 @me代表了当前字段的值 {dede:tagname runphp='yes'} @me = "123456";//如果使用了自定义函数 则@me得到的是函数返 ...

  4. linux如何查看磁盘剩余空间

    [root@Linux var]# df -hl 文件系统 容量 已用 可用 已用% 挂载点 /dev/hdb2 75G 75G 0 100% / /dev/hdb1 99M 9.2M 85M 10% ...

  5. Unity3D研究院之Android同步方法读取streamingAssets

    版本Unity5.3.3 Android 小米pad1 首先非常感谢 @守着阳光 同学在下面的留言.让我解决了一个大的谜团.. 开始我知道 StreamingAssets 路径是这个 path = & ...

  6. numpy下的flatten()函数用法

    flatten是numpy.ndarray.flatten的一个函数,其官方文档是这样描述的: ndarray.flatten(order='C') Return a copy of the arra ...

  7. CSS控制print打印样式

    来源:http://blog.csdn.net/pangni/article/details/6224533 一.添加打印样式 1. 为屏幕显示和打印分别准备一个css文件,如下所示:   用于屏幕显 ...

  8. 前端页面div float 后高度 height 自适应的问题

    最近在画项目页面的时候遇到了一个左侧div一旦加上float:left 属性后,设置其高度height:100% 不起作用,后来网上查了半天也没有找到很好的解决方案,只在csdn里发现了这个马上记录下 ...

  9. ASP.NET MVC 中实现View与Controller分离

    一.开篇题外话 我经常会在博客园逛来逛去,看过很多大牛们的Blog,我很少在这块技术天地活动,之前有发表过几篇日志,好像大部分是和电商有关,作为一个多年的开发人员,很少在这里分享,之前一直在CSDN上 ...

  10. Ext JS treegrid 发生的在tree上增加itemclick 与在其它列上增加actioncolumn 发生事件冲突(event conflict)的解决办法

    Ext JS treegrid 发生的在tree上增加itemclick 与在其它列上增加actioncolumn 发生事件冲突(event conflict)的解决办法 最近在适用Ext JS4开发 ...