今天在项目中碰到了设计盒子两端对齐的栗子，咱们用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. 1289 大鱼吃小鱼    1305 Pairwise Sum and Divide    1344 走格子    1347 旋转字符串    1381 硬币游戏
			
    1289 大鱼吃小鱼 有N条鱼每条鱼的位置及大小均不同,他们沿着X轴游动,有的向左,有的向右.游动的速度是一样的,两条鱼相遇大鱼会吃掉小鱼.从左到右给出每条鱼的大小和游动的方向(0表示向左,1表示向右 ...
    
			
    2. 
						
  2. nginx配置文件作用介绍
			
    ######Nginx配置文件nginx.conf中文详解##### #定义Nginx运行的用户和用户组 user www www; #nginx进程数,建议设置为等于CPU总核心数. worker_ ...
    
			
    3. 
						
  3. Intellij idea史上最简单的教程之Linux下安装与破解Intellij idea2017
			
    一.前言 这一节我们介绍在Linux下如何安装与破解Intellij idea2017.现在有很多公司开发环境都是Linux,所以掌握在Linux环境下使用Idea办公也是咱们必须得掌握的技能. 记住 ...
    
			
    4. 
						
  4. FTP基本操作类大全，外加c#基础公共帮助类
			
    总结平时用到的一些FTP操作类,方便需要的用到.github地址:https://github.com/Jimmey-Jiang/Common.Utility 1.连接FTP服务器 /// <s ...
    
			
    5. 
						
  5. IDoc 基础知识
			
    Application Link Enabling ALE主要为了分布式业务系统而设计的.它可以使业务流程中的每个步骤分布在不同的SAP系统上,系统间可以通过IDoc交互数据.IDoc可以认为是个信封 ...
    
			
    6. 
						
  6. Logcat monkey命令
			
    1. monkey命令 adb shell monkey -p com.autonavi.gxdtaojin --bugreport --ignore-crashes --ignore-timeout ...
    
			
    7. 
						
  7. Java 内存模型- Java Memory Model
			
    多线程越来越多的使用,使得我们需要对它的深入理解.那么就涉及到了Java内存模型JMM.JMM是JVM的一部分,JMM定义了一个线程修改了一个共享变量,其他线程什么时候或者如何看到这个变量,如何去访问 ...
    
			
    8. 
						
  8. 数据库中有的字段为null时，反馈到页面上是什么也不显示？如何用一个【无】字来代替呢？
			
    <asp:ListView ID="listViewCustomer" DataSourceID="ods_Customer" runat="s ...
    
			
    9. 
						
  9. Emgu.CV(一)
			
    由于这块的知识不少,会分好几期写完 什么是OpenCV? OpenCV是一个基于(开源)发行的跨平台计算机视觉库,可以运行在Linux.Windows和Mac OS操作系统上.它轻量级而且高效--由一 ...
    
			
    10. 
						
  10. mongdb单节点安装方法
			
    mongo单节点环境安装(linux) 安装包 下载地址: (https://www.mongodb.com/download-center) 用户权限/目录 创建 dbuser用户 groupadd ...
    
			
    11.