今天在项目中碰到了设计盒子两端对齐的栗子，咱们用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. 【运维】CPU负载
			
    最近对我的本本(4核8线程)用top命令看系统状况出现了CPU利用率超过200%的情况,非常诧异,查了下相关资料,把这个问题弄清楚了.首先来分析下CPU Load load average: 0.09 ...
    
			
    2. 
						
  2. The Nerd Factor   SPOJ - MYQ5
			
    The Nerd Factor Time Limit: 1000MS   Memory Limit: Unknown   64bit IO Format: %lld & %llu [Submi ...
    
			
    3. 
						
  3. 【Learning】多项式乘法与快速傅里叶变换（FFT）
			
    简介: FFT主要运用于快速卷积,其中一个例子就是如何将两个多项式相乘,或者高精度乘高精度的操作. 显然暴搞是$O(n^2)$的复杂度,然而FFT可以将其将为$O(n lg n)$. 这看起来十分玄学 ...
    
			
    4. 
						
  4. vue + ajax + php 接口的使用小接
			
    vue + ajax + php 接口的使用小接 前端代码: (获取用户信息,并渲染页面) userinfor.html <!DOCTYPE html> <html lang=&qu ...
    
			
    5. 
						
  5. SqlServer和Oracle中一些常用的sql语句3 行列转换
			
    --217, SQL SERVER SELECT Cust_Name , MAX(CASE WHEN Order_Date ='2009-08-01' THEN AR END) "2009- ...
    
			
    6. 
						
  6. WPF 快捷方式
			
    http://www.cnblogs.com/gnielee/archive/2010/07/16/wpf-custom-hotkey-command.html
    
			
    7. 
						
  7. JavaEE  对象的串行化（Serialization）
			
    什么情况下需要序列化 a)当你想把的内存中的对象写入到硬盘的时候:b)当你想用套接字在网络上传送对象的时候:c)当你想通过RMI传输对象的时候:再稍微解释一下:a)比如说你的内存不够用了,那计算机就要 ...
    
			
    8. 
						
  8. 张高兴的 Windows 10 IoT 开发笔记：HC-SR04 超声波测距模块
			
    HC-SR04 采用 IO 触发测距.下面介绍一下其在 Windows 10 IoT Core 环境下的用法. 项目运行在 Raspberry Pi 2/3 上,使用 C# 进行编码. 1. 准备 H ...
    
			
    9. 
						
  9. HTTP 简要
			
    HTTP协议就是客户端和服务器交互的一种通迅的格式. 当在浏览器中点击这个链接的时候,浏览器会向服务器发送一段文本,告诉服务器请求打开的是哪一个网页.服务器收到请求后,就返回一段文本给浏览器,浏览器会 ...
    
			
    10. 
						
  10. 阿里JAVA开发手册零度的思考理解(一)
			
    转载请注明原创出处,谢谢! 缘由 阿里JAVA开发手册已经发表有很长时间了,值得认真研究思考推广 阿里官方的Java代码规范标准,这份开发手册不仅规范了一些开发细节,也提出了很多工程开发的哲学,值得好 ...
    
			
    11.