div+css布局实现2端对齐是我们网页排版中经常会使用到的,这篇文章将总结一下可以实现的方法:

html结构

实现demo里面的div通过Css进行2端对齐。

<div class="box">
<div class="demo">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</div>

1.margin负值的方式

该方法需要外面多嵌套一层来实现,通过元素的间距,做为中间层的margin溢出值来实现

<style>
.box{
width:300px;margin:auto;overflow:hidden;border:1px solid #ddd;
}
.box .demo{
margin-left:-10px;width:310px
}
.box .demo div{
width:93.333px;/*(计算:(300-10*2)/3)*/
float:left;
margin-left:10px;
}
</style>

2.display:inline-block/text-align:justify方式

justify方式比较简单方便。只要一个简单元素做了声明,里面的元素就自动等间距两端对齐布局啦!根本无需计算每个列表元素间的margin间距,更不用去修改父容器的宽度。

注意一点:demo结构内元素必须存在【换行符】或【空格符】,否则直接连着写将不会生效

<style>
.demo{
margin:0;padding:0;
text-align:justify;
text-align-last:justify;/*解决IE的支持*/
line-height:0;/*解决标准浏览器容器底部多余的空白*/
}
@media all and (-webkit-min-device-pixel-ratio:0){
.demo{
font-size:0;/*webkit清除元素中使用[换行符]或[空格符]后,最后元素多余的空白*/
}
}
.demo:after{/*text-align-last:justify只有IE支持,标准浏览器需要使用 .demo:after 伪类模拟类似效果*/
display:inline-block;
overflow:hidden;
width:100%;
height:0;
content:'';
vertical-align:top;/*opera浏览器解决底部多余的空白*/
}
.demo div{
width:20%;
display:inline-block;
text-align:center;/*取消上层元素的影响*/
text-align-last:center;
font-size:12px;
}
</style>

3.css3 属性 space-between

该方法基于webkit内核的webapp开发和winphone IE10及以上,常用于移动端布局。

<style>
.demo{
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
-webkit-box-pack:justify;
-webkit-justify-content:space-between;
-ms-flex-pack:justify;
justify-content:space-between;
} .demo div{
width:30%;
}
</style>

4.css3属性column-count

column属性是多列布局,使用column来实现两端对齐只需要设置模块的个数跟column的列数一致即可,推荐使用于移动端布局

<style>
.demo{
-webkit-column-count:3;-moz-column-count:3;column-count:3;
-webkit-column-gap:10px;-moz-column-gap:10px;column-gap:10px;
} .demo div{ }
</style>
参考链接
http://www.fly63.com/article/detial/24

兼容IE的两端对齐的更多相关文章

  1. 使用text-align:justify,让内容两端对齐,兼容IE及主流浏览器的方法

    如果不喜欢看分析过程,可以跳到最后看最终兼容方案 史前方法: 以前实现两端对齐是这样的: <p class="box1">密  码</p> <p cl ...

  2. 【原】css实现两端对齐的3种方法

    说到两端对齐,大家并不陌生,在word.powerpoint.outlook等界面导航处,其实都有一个两端对齐(分散对齐)的按钮,平时使用的也不多,我们更习惯与左对齐.居中对齐.右对齐的方式来对齐页面 ...

  3. css实现两端对齐~

    今天做表单时遇到让上下两个字段对齐的情况,手机号码.用户名. 然后今天在网上找了找相关方法,发现确实是没有什么好的方法解决,特别是当需要兼容的时候.找到了两个我觉得相对还不错的方法: 方法一.是在司徒 ...

  4. css实现两端对齐的3种方法

    两端对齐在移动端非常见,说到两端对齐,大家并不陌生,在word.powerpoint.outlook等界面导航处,其实都有一个两端对齐(分散对齐)的按钮,平时使用的也不多,我们更习惯与左对齐.居中对齐 ...

  5. CSS两端对齐

    前面的话   两端对齐在导航条Tab的制作中非常常用.本文将详细介绍CSS两端对齐的3种实现方式 flex   弹性盒模型flex作为强大的弹性布局方式,可以hold住大部分的布局效果,当然也包括两端 ...

  6. css之文本两端对齐

    在进行网页设计时,我们经常会看到这样的样式:文本两端对齐. css为我们提供了一个属性可以实现这样的效果:text-align: justify.不过这个只能用来设置多行文本(除最后一行).如果只有单 ...

  7. 自适应的两端对齐:text-align:justify

    <!DOCTYPE HTML> <html> <head> <title>文本两端对齐 by hongchenok</title> < ...

  8. text-align:justify 两端对齐

    今天看页面发现一个以前没用过的css属性text-align:justify,查了一下非常实用,是一个实现文本两端对齐的属性. 使用前: 使用后: 看了一些文章还有结合inline-block+tex ...

  9. css实现表单label文字两端对齐

    如图,在我们写页面的时候,经常遇到这种的情况,而需求是想让label文字两端对齐,我们来看看如何用css解决 /**css代码**/ ul li{ list-style: none; } .info- ...

随机推荐

  1. Django(七)

    一.ModelForm操作及验证 1.class Meta:class Meta: #注意以下字段不能加逗号 model = models.UserInfo #这里的all代指所用的字段,也可以是一个 ...

  2. 一种加快在苹果app store中上架的方法

    预计近期苹果app应用上架的比較多,审核比較慢,如今一个app从提交到上架短则7.8天.长则2.3个星期.我在实际上线应用时,总结了一个简单有用的小技巧,能够加快上架时间,近期使用这样的方法后.我们基 ...

  3. Android SQLite服务--创建、增删改查

    <pre name="code" class="java">import android.content.Context; import andro ...

  4. 单片机project师必备的知识

    C语言编程 程序编译过程  哪部分干什么 数据结构  链表 二叉树 算法   数组  堆栈 队列算法 遍历 常量在内存中的表现形式 语法和内存的相应关系 数电 UML 类图 时序图 状态图 用例图   ...

  5. 基于UEFI和GPT模式下U盘安装windows8.1和Linux双启动教程

    首先作以下准备: 1.一个8G以上的U盘,用的时候会格式化,建议为空 2.分区助手软件,官网下载链接 3.一个linux系统,这里用同学推荐的Fedora 26,官网下载链接 4.rufus 创建U盘 ...

  6. oc17--点语法

    // // Person.h // day13 #import <Foundation/Foundation.h> @interface Person : NSObject { // @p ...

  7. php basic syntax

    php basic syntax PHP(Hypertext Preprocessor,超文本预处理器). 一.PHP入门 1.指令分隔符“分号”         语义分为两种:一种是在程序中使用结构 ...

  8. hdoj--3635--Dragon Balls(并查集记录深度)

    Dragon Balls Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Tot ...

  9. hdoj--1151--Air Raid(最大独立集)

    Air Raid Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total S ...

  10. Node.js:文件系统

    ylbtech-Node.js:文件系统 1.返回顶部 1. Node.js 文件系统 Node.js 提供一组类似 UNIX(POSIX)标准的文件操作API. Node 导入文件系统模块(fs)语 ...