PhoneGap中文网

 找回密码
 立即注册
PhoneGap中文网 视频教程 ionic 教程 查看内容

ionic中 .col-{align} : 列纵向对齐

2015-4-12 14:07| 发布者: admin| 查看: 10807| 评论: 0

摘要: .col-{align} : 列纵向对齐如果一行中各元素的高度不一样,那么比较矮的那些元素将自动被拉伸以适应 整行的高度。有时你不想这样,希望那些元素保持自身的高度。ionic提供了一些预置的CSS类用来 指定这些元素纵向的 ...

.col-{align} : 列纵向对齐

如果一行中各元素的高度不一样,那么比较矮的那些元素将自动被拉伸以适应 整行的高度。

有时你不想这样,希望那些元素保持自身的高度。ionic提供了一些预置的CSS类用来 指定这些元素纵向的对齐方式:

  • .col-top - 让元素纵向顶对齐
  • .col-center - 让元素居中对齐
  • .col-bottom - 让元素向底对齐

这是通过设置元素的CSS3样式align-self来实现的。



<!DOCTYPE html>
<html>
<head>
 <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">
 <link rel="stylesheet" type="text/css" href="ionic.min.css">
</head>
<body>
 <div class="bar bar-header">
  <h1 class="title">列纵向对齐</h1>
 </div>
 <div class="scroll-content has-header">
  <div class="row">
   <div class="col">.col</div>
   <div class="col">.col</div>
   <div class="col">.col</div>
   <div class="col">1<br>2<br>3<br>4</div>
  </div>

  <div class="row">
   <div class="col col-top">.col</div>
   <div class="col col-center">.col</div>
   <div class="col col-bottom">.col</div>
   <div class="col">1<br>2<br>3<br>4</div>
  </div>

  <div class="row row-top">
   <div class="col">.col</div>
   <div class="col">.col</div>
   <div class="col">.col</div>
   <div class="col">1<br>2<br>3<br>4</div>
  </div>

  <div class="row row-center">
   <div class="col">.col</div>
   <div class="col">.col</div>
   <div class="col">.col</div>
   <div class="col">1<br>2<br>3<br>4</div>
  </div>

  <div class="row row-bottom">
   <div class="col">.col</div>
   <div class="col">.col</div>
   <div class="col">.col</div>
   <div class="col">1<br>2<br>3<br>4</div>
  </div>

 </div>
</body>
</html>

1

头晕

难过

扯淡

不解

搞笑

支持

超赞

欠扁

刚表态过的朋友 (1 人)

相关阅读

最新评论

关闭

站长推荐 上一条 /1 下一条

ionic4视频教程

Archiver|手机版|小黑屋| PhoneGap中文网 ( 京ICP备13027796号-1 )  

GMT+8, 2025-2-7 19:59 , Processed in 0.046357 second(s), 20 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

返回顶部