box-pack表示父容器里面子容器的水平对齐方式,可选参数如下所示:
start | end | center | justify
  1. <article class="wrap">
  2. <section class="sectionOne">01</section>
  3. <section class="sectionTwo">02</section>
  4. <section class="sectionThree">03</section>
  5. </article>
  1. .wrap{
  2. width:600px;
  3. height:108px;
  4. border:1px solid red;
  5. display:-moz-box;
  6. display:-webkit-box;
  7. display:box;
  8. -moz-box-pack:end;
  9. -webkit-box-pack:end;
  10. -o-box-pack:end;
  11. box-pack:end;
  12. }
  13. .wrap section{
  14. width:100px;
  15. }
  16. .wrap .sectionOne{
  17. background:orange;
  18. }
  19. .wrap .sectionTwo{
  20. background:purple;
  21. }
  22. .wrap .sectionThree{
  23. background:green;
  24. }
start
在box-pack表示水平居左对齐,如下图所示
 
end
在box-pack表示水平居右对齐,如下图所示
 
center
在box-pack表示水平居中对齐,如下图所示
 
justify
在box-pack表示水平等分父容器宽度(唯一遗憾的是,firefox与opera暂时不支持,只有safari、chrome支持)
 

box-pack的更多相关文章

  1. 25款创新的 PSD 格式搜索框设计素材【免费下载】

    这一次,我们给大家带来的素材是25款很有吸引力的搜索框 PSD 设计,你可以免费下载使用.有时候,搜索框容易被访客忽视,因为其简单和没有吸引力的设计.如果这是你所面对的问题,那么我们会鼓励你去看看在这 ...

  2. c++ 中的符号与关键字

    符号按照符号的ASC码数值从小到达排列,关键字按照英文字母排序. & [38] 位运算:取地址:左值引用[指针.引用都是可以做类型转换的] #include <iostream> ...

  3. WPF中的Pack URI

    更多资源:http://denghejun.github.io 问题 说来也简单:首先,我在WPF项目中建立了一个用户自定义控件(CustomControl),VS模板为我们自动生成了 CustomC ...

  4. uva1587 Box

    Ivan works at a factory that produces heavy machinery. He has a simple job -- he knocks up wooden bo ...

  5. WPF 中的 Pack URI地(资源文件加载)

    参考资源网http://msdn.microsoft.com/zh-cn/library/aa970069.aspx#Absolute_vs_Relative_Pack_URIs 在 Windows ...

  6. BOX

    题目连接:http://acm.tju.edu.cn/toj/showp2392.html2392.   Box Time Limit: 1.0 Seconds   Memory Limit: 655 ...

  7. Visual Studio 2010 集成 SP1 补丁 制作 Visual Studio 2010 Service Pack 1 完整版安装光盘的方法

    Now that Visual Studio 2010 SP1 has been released, administrators and developers may wish to install ...

  8. [Windows Azure] Walkthrough to Configure System Center Management Pack for Windows Azure Fabric Preview for SCOM 2012 SP1 (with a MetricsHub Bonus)

    The wait is finally over. This is a huge update to the Azure Management Pack over the one that was r ...

  9. 关于virtual box 虚拟机使用

    关于virtual box的使用,如果想用共享文档:比如当前系统为Ubuntu,virtual box安装了win7,win7与Ubuntu之间的文件使用,就可以利用 共享文档 这个便利的功能—— 在 ...

  10. fedora 21下Virtual Box安装Windows XP SP3

    Installing Virtual Box and Windows XP SP3 during Fedora 21 The first step:Download and Install Virtu ...

随机推荐

  1. php学习【2】

    1:运算符 <?php $x=1; echo 1+1;//算术运算符 echo $x+=5;//赋值运算符 echo "<br/>"; echo $x++; ec ...

  2. python__系统 : 线程

    线程之间,全局变量可以共享,但是局部变量依然是不共享的,线程的创建方式: threading.Thread(),还可以定义一个类继承Thread,重写他的run方法,具体和进程的写法一样. 那么,线程 ...

  3. 微信小程序相关

    https://www.cnblogs.com/shenzikun1314/p/7805168.html

  4. python学习之数据类型与运算符号

    python版本:3.6 python编辑器:pycharm 最新版本 整理成代码如下: #!/usr/bin/env python #-*- coding: utf-8 -*- # 数学操作符 pr ...

  5. spark练习---ip匹配以及广播的特性

    今天,我们还是在介绍spark的小练习,这次的小练习还是基于IP相关的操作,我们可以先看一下今天的需求,我们有两个文件, 第一个文件,是IP的字典,也就是我们上一篇介绍过的,就是表明了所有IP字段所属 ...

  6. Android 用Chrome浏览器打开url 自定义样式

    1.效果预览 1.1.真实效果就是从某一个APP,打开一个url,跳转到谷歌浏览器,返回之后,又回到之前的APP      1.2.说明一下条件 1.手机上必须要安装谷歌浏览器 2.手机上的默认浏览器 ...

  7. 解决不了bug的时候看一下:

    解决不了bug的时候看一下: 1.机器是不会出错的,出错的一定是人.只是你还没有意识到哪里出了错. 2.产生bug 的原因想错了,你以为是系统的bug ,那么你肯定就不想着去解决,你也就解决不了. 这 ...

  8. android MotionEvent

    getAction() 获取事件的类型,这是一个组合值,由pointer的index值和事件类型值组合而成的 getActionMasked() 获取事件的类型,不具有其他信息 参考: http:// ...

  9. vue-cli 引入axios

    写文章注册登录     首页 下载App × vue-cli 引入axios及跨域使用 星球小霸王 关注 2017.10.04 16:40* 字数 504 阅读 13038评论 2喜欢 18 使用 c ...

  10. 宝石TD迷宫设计器

    说起宝石TD,能追溯到我上高二那会,算来是2005年. 所谓一款TD类的魔兽RPG,宝石TD可以算是达到了TD迷宫的巅峰,三进三出更是别具匠心. 这个迷宫设计器是去年在焦作做的,只完成了迷宫设计功能, ...