今天在项目中碰到了设计盒子两端对齐的栗子，咱们用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. RAID及热备盘详解
			
    RAID,为Redundant Arrays of Independent Disks的简称,中文为廉价冗余磁盘阵列. 一．出现的原因(RAID的优点): 它的用途主要是面向服务器,但现在的个人电脑由 ...
    
			
    2. 
						
  2. Power Strings   poj2406（神代码）
			
    Power Strings Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 29402   Accepted: 12296 D ...
    
			
    3. 
						
  3. 约会安排HDU - 4553
			
    寒假来了,又到了小明和女神们约会的季节.  小明虽为屌丝级码农,但非常活跃,女神们常常在小明网上的大段发言后热情回复"呵呵",所以,小明的最爱就是和女神们约会.与此同时,也有很多基 ...
    
			
    4. 
						
  4. 2017-2018 ACM-ICPC, NEERC, Southern Subregional Contest, qualification stage (Online Mirror, ACM-ICPC Rules, Teams Preferred)
			
    题目链接:http://codeforces.com/problemset/problem/847/I I. Noise Level time limit per test 5 seconds mem ...
    
			
    5. 
						
  5. python采用 多进程/多线程/协程 写爬虫以及性能对比，牛逼的分分钟就将一个网站爬下来!
			
    首先我们来了解下python中的进程,线程以及协程! 从计算机硬件角度: 计算机的核心是CPU,承担了所有的计算任务.一个CPU,在一个时间切片里只能运行一个程序. 从操作系统的角度: 进程和线程,都 ...
    
			
    6. 
						
  6. swiper拖拽之后不自动滑动问题
			
    //swiper轮播图 var mySwiper = new Swiper('.swiper-container',{ initialSlide :0, autoplay : 3000, direct ...
    
			
    7. 
						
  7. 移动HTNL5前端框架—MUI
			
      前  言 JRedu 鉴于之前的很多前端框架(特别是响应式布局的框架),UI控件看起来太像网页,没有原生感觉,因此追求原生UI也是MUI的重要目标.MUI以iOS平台UI为基础,补充部分Andro ...
    
			
    8. 
						
  8. HDU1212
			
    大数MOD #include<cstdio> #include<cstdlib> #include<iostream> #include<algorithm& ...
    
			
    9. 
						
  9. 初学者易上手的SSH-struts2 04值栈与ognl表达式
			
    什么是值栈?struts2里面本身提供的一种存储机制,类似于域对象,值栈,可以存值和取值.,特点:先进后出.如果将它当做一个容器的话,而这个容器有两个元素,那么最上面的元素叫做栈顶元素,也就是所说的压 ...
    
			
    10. 
						
  10. 关闭eclipse自动弹出console的功能
			
    当启动项目后,console有值时就会弹出,挺烦人的,可以如下修改
    
			
    11.