1. .col : 默认的定宽列
  2. 在ionic的栅格中，每一行的各列默认是等宽的，这使得实现一个图片 浏览界面非常简单。下图是instagram app的截图：
  3. instagram
  4.  
  5. <!DOCTYPE html>
  6. <html>
  7. <head>
  8.  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">
  9.  <link rel="stylesheet" type="text/css" href="ionic.min.css">
  10. </head>
  11. <body>
  12.  <div class="bar bar-header bar-positive">
  13.   <h1 class="title">POPULAR</h1>
  14.   <a class="button icon ion-refresh"></a>
  15.  </div>
  16.  <div class="scroll-content has-header">
  17.   <div class="row">
  18.    <div class="col"><img src="img/g-1.jpg"></div>
  19.    <div class="col"><img src="img/g-2.jpg"></div>
  20.    <div class="col"><img src="img/g-3.jpg"></div>
  21.    <div class="col"><img src="img/g-4.jpg"></div>
  22.   </div>
  23.   <div class="row">
  24.    <div class="col"><img src="img/g-5.jpg"></div>
  25.    <div class="col"><img src="img/g-6.jpg"></div>
  26.    <div class="col"><img src="img/g-7.jpg"></div>
  27.    <div class="col"><img src="img/g-8.jpg"></div>
  28.   </div>
  29.   <div class="row">
  30.    <div class="col"><img src="img/g-9.jpg"></div>
  31.    <div class="col"><img src="img/g-10.jpg"></div>
  32.    <div class="col"><img src="img/g-11.jpg"></div>
  33.    <div class="col"><img src="img/g-12.jpg"></div>
  34.   </div>
  35.   <div class="row">
  36.    <div class="col"><img src="img/g-13.jpg"></div>
  37.    <div class="col"><img src="img/g-14.jpg"></div>
  38.    <div class="col"><img src="img/g-15.jpg"></div>
  39.    <div class="col"><img src="img/g-16.jpg"></div>
  40.   </div>
  41.  </div>
  42.  <div class="tabs tabs-dark tabs-icon-only">
  43.   <a class="tab-item"><i class="icon ion-home"></i></a>
  44.   <a class="tab-item active"><i class="icon ion-star"></i></a>
  45.   <a class="tab-item"><i class="icon ion-camera"></i></a>
  46.   <a class="tab-item"><i class="icon ion-chatbubble"></i></a>
  47.   <a class="tab-item"><i class="icon ion-document"></i></a>
  48.  </div>
  49. </body>
  50. </html>

　　

ionic中 .col : 默认的定宽列的更多相关文章

  1. datagrid在MVC中的运用06-固定连续列

    本文主要体验datagrid的frozenColumns属性. □ frozenColumns效果: 在frozenColumns的列将保持不动,而其他列横向滚动. □ frozenColumns效果 ...

  2. NEC学习 ---- 布局 -两列， 右侧定宽，左侧自适应

    该篇必须引用初始化样式和功能性样式,样式在前篇 http://www.cnblogs.com/Zell-Dinch/p/4436054.html 中已经提及. 上篇中介绍了左侧定宽,右侧自适应的布局, ...

  3. css 两列布局中单列定宽单列自适应布局的6种思路

    前面的话 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.本文将从float.inline-block.table.absolute.flex和grid这六种思路来详细说明如何巧妙地实现 ...

  4. NEC学习 ---- 布局 -两列， 左侧定宽，右侧自适应

    CSS代码:以下两处代码是NEC中CSS初始化样式和功能性样式.今后的NEC研究中,默认这两处是引用的. /* 这是CSS reset 代码 --- 初始化样式 */ /* reset */ html ...

  5. NEC学习 ---- 布局 -两列定宽

    这个布局相对来说比较容易, 就是最外层的容器中包含两个子容器, 一个容器向右浮动, 另一个向左浮动, 两个容器的宽度+2个容器之间的距离等于外层容易的中宽度. html代码: <div clas ...

  6. CSS布局 两列布局之单列定宽,单列自适应布局思路

    前言 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.比如斗鱼的直播间,后台管理系统都是常用的 我们将从 float, inline-block, table, absolute, fl ...

  7. NEC学习 ---- 布局 -三列， 左右定宽，中间自适应

    ---恢复内容开始--- 这个布局很牛掰, 我觉得学习价值很大. 通过这个的学习, 我发现, 能将简单的事情做好, 就距离成功不远了. 其实布局就是利用所学知识, 活用. 在没看这个之前, 发现自己的 ...

  8. 中间自适应，左右定宽的两种经典布局 ---- 圣杯布局 VS 双飞翼布局

    一.引子 最近学了些js框架,小有充实感,又深知如此节奏的前提需得基础扎实,于是回头想将原生CSS和Javascript回顾总结一番,先从CSS起,能集中它的就在基础的布局上,便查阅了相关资料,将布局 ...

  9. css布局：定宽，自适应

    css三栏布局:1.中自:float,absolute,margin三种方法.2.中固:margin,table两种方法. 两边定宽,中间自适应: float: #left{ float:left; ...

随机推荐

  1. hdu1026

    #include <stdio.h> #include <string.h> #include <queue> using namespace std; struc ...

  2. C# cookies

    谷歌浏览器- 工具---internet选项---常规---浏览历史记录---设置  cookie和网站数据 C:\Documents and Settings\Administrator\Local ...

  3. Apache Kafka开发入门指南(2)

    Apache Kafka目标是统一离线和在线处理,与Flume和Scribe相比较,Kafka在处理活动流数据方面更具优势.但是从架构的视野来看,Kafka与传统的消息系统(例如ActiveMQ或Ra ...

  4. css布局理解

    1.盒模型(页面的所有元素都看成一个类似于礼品盒的盒子:包括块级元素和行内元素(也叫内联元素)):http://www.cnblogs.com/cchyao/archive/2010/07/12/17 ...

  5. Node.js：EventEmitter

    概要:本篇博客主要介绍EventEmitter Node.js所有的异步I/O操作在完成时都会发送一个事件到事件队列.事件由EventEmitter对象提供.下面通过一个例子来说明EventEmitt ...

  6. IE中float元素如果同时设置了margin值，此时margin的值会变为双倍的解决方法

    IE中float元素如果同时设置了margin值,此时margin的值会变为双倍, 解决办法: 是在该元素中加入display:inline.

  7. js返回上一页并刷新代码整理

    一:JS 重载页面,本地刷新,返回上一页 复制代码 代码如下: <a href="javascript:history.go(-1)">返回上一页</a> ...

  8. haskell类型

    一.源文件 介绍这个主要是因为下文很多代码写在源文件中,然后从ghci加载源文件进行测试. 创建一个文本文件,在其中输入,并保存为add.hs文件 -- file: add.hs add x y = ...

  9. 安卓---高德地图API应用

    说明:定位需要导入android_location 的jar包,如果没有会报错,这个官方网站好像找不到,这是我在网上找到的一个链接 http://download.csdn.net/detail/ra ...

  10. Caf音频文件混合

    一.两个同样时常的caf音频文件,可以通过下面的代码混合 二.代码地址: https://github.com/liqiushui/AudioRecorderCafMix