今天在项目中碰到了设计盒子两端对齐的栗子，咱们用inline-block方法轻松的解决了，下面是我的经验：
　　原理： 利用文字text-align：justify; 操纵inline-block盒子，能够实现盒子两端对齐。   
　　说明： inline-block元素 会按照基线对齐的方式两列，给这个元素的父盒子设置一个text-align：justify； 即可实现两端对齐的功能
 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8" />

     <title>盒子两端对齐</title>

 </head>

     <style type="text/css">

         * {

             margin: 0;

             padding: 0;

         }

         html,body {

             width: 100%;

             height: 100%;

         }

         .box {

             width: 100%;

             height: 100%;

             /* 设置元素两端对齐 */

             text-align: justify;

         }

         /* 这里的伪元素一定要加上，不然span元素不能两端对齐 */

         .box:after {

             content: "";

             display: inline-block;

             overflow: hidden;

             width: 100%;

         }

         .box span {

             width: 50px;

             height: 50px;

             /* 设置盒子为行内块 */

             display: inline-block;

             background-color: skyblue;

             /* 设置盒子内元素水平居中 */

             text-align: center;

             /* 设置盒子内容垂直居中 */

             line-height: 50px;

         }

     </style>

 <body>

     <div class="box">

         <span>1</span>

         <span>2</span>

         <span>3</span>

         <span>4</span>

         <span>5</span>

     </div>

 </body>

 </html>
　　　

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>盒子两端对齐</title>
</head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html,body {
width: 100%;
height: 100%;
}
.box {
width: 100%;
height: 100%;
/* 设置元素两端对齐 */
text-align: justify;
}
/* 这里的伪元素一定要加上，不然span元素不能两端对齐 */
.box:after {
content: "";
display: inline-block;
overflow: hidden;
width: 100%;
}
.box span {
width: 50px;
height: 50px;
/* 设置盒子为行内块 */
display: inline-block;
background-color: skyblue;
/* 设置盒子内元素水平居中 */
text-align: center;
/* 设置盒子内容垂直居中 */
line-height: 50px;
}
</style>
<body>
<div class="box">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
</body>
</html>



 




从小就喜欢看科幻片，特别是电影里面几行代码就能够获得，然后解救全世界的神秘的人，当然最感兴趣的就是代码本身了
												


											
让盒子两端对齐小技巧 => inline-block的更多相关文章
	

    
								
  1. 【】小技巧】CSS文字两端对齐
		
    需求如下,红框所在的文字有四个字的.三个字的.两个字的,如果不两端对齐可以选择居中对齐,或者右对齐.但是如果要像下面这样两端对齐呢? 我相信以前很多人都这么干过:两个字中间使用 来隔开达到四个字的宽度 ...
    
		
    2. 
						
  2. 【小技巧】css文字两端对齐
		
    一.文字两端对齐方法:  text-align-last: justify; 二.举个丽子:  三.效果如下:  四.注意:  要使文字在容器中两端对齐,该容器需要是一个块级元素,要有自己的宽度.
    
		
    3. 
						
  3. 代码对齐                                                    分类：            C#小技巧             2014-04-17 14:45    166人阅读    评论(0)    收藏
		
    开发项目时,为了是代码层次清晰.美观,常常需要调整多行,使之对齐.在网上也看到一些方法,感觉不好用,偶尔发现一个小技巧. (1)多行代码同时右移 同时选中几行,按"Tab"键,就会 ...
    
		
    4. 
						
  4. Block Design 小技巧之添加RTL代码到block_design
		
    Block Design 小技巧之添加RTL代码到block_design 1.首先得打开Block Design,右击RTL文件,才会出现Add module to Block Design选项.  ...
    
		
    5. 
						
  5. 【MS Office2013小技巧】Word中公式中的等号对齐
		
    步骤: 1. 先将所需要对齐的公式分不同行打出来: 2. 选中所有公式,右键点击并选择“对齐点(A) =”,如图 此时,如果能够正常对齐,则无需进行下面的步骤,但如果出现下图情况并未正常对齐的,再进行 ...
    
		
    6. 
						
  6. Css 小技巧总结
		
    相对偏移 指定left top等属性就能够够完美控制一个元素的位置 如: position:relative; left:2px; 今天遇到一个很好玩的问题,当两个并排浮动框,当一个框的长度太大时就会 ...
    
		
    7. 
						
  7. CSS 黑魔法小技巧，让你少写不必要的JS，代码更优雅
		
    首页   登录注册         CSS 黑魔法小技巧,让你少写不必要的JS,代码更优雅 阅读 8113 收藏 927 2017-09-26 原文链接:github.com 腾讯云容器服务CSS,立 ...
    
		
    8. 
						
  8. 关于css布局、居中的问题以及一些小技巧
		
    CSS的两种经典布局 左右布局 一栏定宽,一栏自适应 <!-- html --> <div class="left">定宽</div> < ...
    
		
    9. 
						
  9. 【原】css实现两端对齐的3种方法
		
    说到两端对齐,大家并不陌生,在word.powerpoint.outlook等界面导航处,其实都有一个两端对齐(分散对齐)的按钮,平时使用的也不多,我们更习惯与左对齐.居中对齐.右对齐的方式来对齐页面 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 什么是PWM信号
			
    PWM信号脉宽调制PWM是开关型稳压电源中的术语.这是按稳压的控制方式分类的,除了PWM型,还有PFM型和PWM.PFM混合型.脉宽宽度调制式(PWM)开关型稳压电路是在控制电路输出频率不变的情况下, ...
    
			
    2. 
						
  2. Spark官方1   ---------Spark SQL和DataFrame指南（1.5.0）
			
    概述 Spark SQL是用于结构化数据处理的Spark模块.它提供了一个称为DataFrames的编程抽象,也可以作为分布式SQL查询引擎. Spark SQL也可用于从现有的Hive安装中读取数据 ...
    
			
    3. 
						
  3. servlet自动获取前端页面提交数据
			
    servlet自动获取前端页面jsp提交数据 以下是本人在学习过程中,因前端页面提交参数过多,后台servlet封装实体类过于麻烦而写的一个工具类,应用于jsp/servlet数据提交后,基于MVC+ ...
    
			
    4. 
						
  4. Python文件读写模式
			
    r 打开只读文件,该文件必须存在. r+ 打开可读写的文件,该文件必须存在.可读,可写,可追加. w 打开只写文件,若文件存在则文件长度清为0,即该文件内容会消失.若文件不存在则建立该文件. w+ 打 ...
    
			
    5. 
						
  5. 图解clientWidth，offsetWidth，scrollWidth，scrollTop
			
    新手看到这几个属性,很头疼,参考了网上一些文章,加上自己实践,给出对这几个属性的解释 我把代码贴上来,方便大家验证 在chrome浏览器中,不知为什么图片容器高度比图片高度多了4px,把图片设置为bl ...
    
			
    6. 
						
  6. jQuery插件：Ajax将Json数据自动绑定到Form表单
			
    jQuery注册方法的两种常用方式: //jQuery静态方法注册 //调用方法$.a1() $.extend({ a1: function () { console.log("a1&quo ...
    
			
    7. 
						
  7. ZOJ 1489 HDU1395 2^x mod n = 1 数学
			
    2^x mod n = 1 Time Limit: 2 Seconds      Memory Limit:65536 KB Give a number n, find the minimum x t ...
    
			
    8. 
						
  8. Sql Server 数据库中调用dll文件
			
    1.首先新建一个空的解决方案,并添加一个类库,代码如下,编译并生产dll using System; using System.Collections.Generic; using System.Da ...
    
			
    9. 
						
  9. ELK日志收集分析系统配置
			
    ELK是日志收益与分析的利器. 1.elasticsearch集群搭建 略 2.logstash日志收集 我这里的实现分如下2步,中间用redis队列做缓冲,可以有效的避免es压力过大: 1.n个ag ...
    
			
    10. 
						
  10. 基于Redis位图实现系统用户登录统计
			
    项目需求,试着写了一个简单登录统计,基本功能都实现了,日志数据量小.具体性能没有进行测试~ 记录下开发过程与代码,留着以后改进! 1. 需求 1. 实现记录用户哪天进行了登录,每天只记录是否登录过,重 ...
    
			
    11.