今天在项目中碰到了设计盒子两端对齐的栗子，咱们用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. Linux入门之常用命令（2）
			
    (三) 链接文件 ln [-s] [源文件] [目标文件]       -s表示符号链接 没有则是硬链接 硬链接是一个独立文件 (相当于一个副本) 符号链接是一个链接文件(相当于一个快捷方式) 但是修 ...
    
			
    2. 
						
  2. PHP 生成毫秒时间戳
			
    PHP的time()函数生成当前时间的秒数,但是在一些情况下我们需要获取当前服务器时间和GMT(格林威治时间)1970年1月0时0分0秒的毫秒数,与Java中的currentTimeMilis()函数 ...
    
			
    3. 
						
  3. 2014 Benelux Algorithm Programming Contest (BAPC 14)E
			
    题目链接:https://vjudge.net/contest/187496#problem/E E Excellent Engineers You are working for an agency ...
    
			
    4. 
						
  4. cnpm的全局安装
			
    npm install -g cnpm --registry=https://registry.npm.taobao.org
    
			
    5. 
						
  5. 在ASP.NET Core中如何支持每个租户数据存储策略的数据库
			
    在ASP.NET Core中如何支持每个租户数据存储策略的数据库 不定时更新翻译系列,此系列更新毫无时间规律,文笔菜翻译菜求各位看官老爷们轻喷,如觉得我翻译有问题请挪步原博客地址 本博文翻译自: ht ...
    
			
    6. 
						
  6. java关键字中文对比
			
    abstract 摘要|抽象assert 声称boolean 布尔break 中断byte 字节case 实例catch 捕捉char 烧焦class 类const 常量continue 持续defa ...
    
			
    7. 
						
  7. 在linux上安装rz、sz包
			
    在SecureCRT这样的ssh登录软件里, 通过在Linux界面里输入rz/sz命令来上传/下载文件. 对于RHEL5, rz/sz默认没有安装所以需要手工安装.sz: 将选定的文件发送(send) ...
    
			
    8. 
						
  8. dets
			
    模块说明 提供基于文件的项式存储,项式以元组表示,其中某个位置为键,默认第1位置 Dets为Mniesia所用,后者增加了事务.查询.和分布式支持. Dets文件不能超过2GB. Dets只有set  ...
    
			
    9. 
						
  9. DB2插入数据 sqlcode302 sqlstate22001错误如何解决？
			
    总结:出现这种错误的原因主要是,插入数据时的长度和数据库中定义的长度不匹配或超出限制.
    
			
    10. 
						
  10. ajax请求中设置特殊的RequestHeader
			
    现在ajax应用已经相当广泛了,有很多不错的ajax框架可供使用.ajax是一个异步请求,也主要是一种客户端的脚本行为.那么,如何在请求之前为请求添加特殊的一些头部信息呢? 下面是一个简单的例子,我用 ...
    
			
    11.