下面先看一段代码实例:

<!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. bootstrap源码里的function加上了+号

    一般看JQuery插件里的写法是这样的 (function($) { //... })(jQuery); 今天看到bootstrap的javascript组件是这样写的 !function( $ ){ ...

  2. javascript面向对象规则汇总以及json

    javascript中一切皆对象,而且定义非常灵活, 于是出现了一些相对其他编程语言环境下匪夷所思的代码: ---------------------------------------------- ...

  3. Java static block static constructor , static field

    http://stackoverflow.com/questions/7121213/singleton-instantiation http://docs.oracle.com/javase/spe ...

  4. ABBYY将JPEG文件转换成Word文档的方法

    日常工作中处理JPEG格式的图像文件时,有时需要转换成Word文档进行编辑,市场上应用而生了很多转换工具,相信不少人听说过OCR(光学字符识别)软件,可以用来转换图像文件,而在OCR软件中, ABBY ...

  5. 010. 使用.net框架提供的属性

    C#允许在类和类成员上声明特性(类), 可在运行时解释类和类的成员. 这个特性也称为属性, 使用Attribute.下面演示如何使用.net框架提供的属性. using System; using S ...

  6. 将Xml或Json生成类的最简单方式

      来源于 http://stackoverflow.com/questions/3187444/convert-xml-string-to-object

  7. bash内部命令-2

    http://www.gnu.org/software/bash/ http://www.tldp.org/HOWTO/Bash-Prompt-HOWTO/ [root@250-shiyan ~]# ...

  8. unity, SkinnedMeshRenderer.updateWhenOffscreen

    发现,必须勾选update when offscreen,当skinnedMeshRenderer发生形变时bounds才会更新.

  9. ubuntu12.04+hadoop2.2.0+zookeeper3.4.5+hbase0.96.2+hive0.13.1伪分布式环境部署

    目录: 一.hadoop2.2.0.zookeeper3.4.5.hbase0.96.2.hive0.13.1都是什么? 二.这些软件在哪里下载? 三.如何安装 1.安装JDK 2.用parallel ...

  10. MySQL 利用SQL线程对Binlog操作(转)

    背景: 对于MySQL的binlog的查看都是用其自带的工具mysqlbinlog进行操作的,其实还有另一个方法来操作binlog,就是Replication中的SQL线程去操作binlog,其实bi ...