Layout.css

cube 中并没有提供大而全的栅格系统，这不是 cube 的出发点。相反，我们提供细节颗粒化的布局工具，方便自由使用。

inline-block 组件

Float 在 IE6、7 中有许多臭名昭著的 Bug，很多时候可以用 inline-block 来代替。YUI则是完全用 inline-block 来做栅格。

span 元素

div 元素

<div class="dib-box">
    <span class="dib" style="border: 1px solid #ccc;padding:5px 0;">span 元素</span>
    <div class="dib" style="border: 1px solid #ccc;padding:5px 0;">div 元素</div>
</div>

换行符会到导致两个 inline-block 元素之间产生空隙，cube 中为了解决这个问题，需要两个步骤：

在父级元素使用dib-box这个 class，也就是设置font-size: 0;
每个 inline-block 元素使用dib，font-size 重置为默认的 12px。

所以需要注意的是如果想为每个 inline-block 元素设置不同的 font-size，需要这样重置，保证下面的样式会覆盖.dib-box .dib的设置。

.foo .dib-box .dib {
    font-size: 14px;
}

两端对齐布局

两端对齐是指一行内第一个元素左对齐，最后一个元素右对齐的布局方式。通常可以使用float:left和float:right。

但使用浮动无法很好的控制在垂直方向上的对齐，为此，cube 中以 inline-block 组件为基础，形成了独有的两端对齐自适应模块。

只需要在父元素使用 class justify，内部使用dib即可，兼容 IE6+。

标题

更多…

<div class="justify" style="border-bottom: 1px solid #999;height: 50px;">
    <div class="dib" style="vertical-align: baseline;font-size: 36px;">标题</div>
    <a class="dib" href="###" style="vertical-align: baseline;">更多…</a>
</div>

CSS模拟三角形

CSS可以通过 border 来模拟三角形箭头，需要注意的是，IE6 中需要使用border-style:dashed才能达到透明的效果。

.arrow-top

.arrow-bottom

.arrow-left

.arrow-right

.arrow-left-top

.arrow-right-top

.arrow-left-bottom

.arrow-right-bottom

<p><code>.arrow-top</code><b class="arrow arrow-top"></b></p>
<p><code>.arrow-bottom</code><b class="arrow arrow-top"></b></p>
<p><code>.arrow-left</code><b class="arrow arrow-top"></b></p>
<p><code>.arrow-right</code><b class="arrow arrow-right"></b></p>
<p><code>.arrow-left-top</code><b class="arrow arrow-left-top"></b></p>
<p><code>.arrow-right-top</code><b class="arrow arrow-right-top"></b></p>
<p><code>.arrow-left-bottom</code><b class="arrow arrow-left-bottom"></b></p>
<p><code>.arrow-right-bottom</code><b class="arrow arrow-right-bottom"></b></p>

等比缩放组件

网页中的视频通常希望是等比例缩放的，以保证播放器不会产生多余的黑边。目前常见的视频比例有16:9和4:3两种，由于播放器控制栏高度不同，需要配合JS判断不同的视频来源，然后增加对应的 Class。

目前支持如下网站：

.youku 优酷
.wole 我乐网（56.com）
.tudou 土豆
.iqiyi 爱奇艺
.youtube Youtube

宽屏 16:9

使用 Class widescreen

父容器固定宽度

</embed>

<div class="well" style="width:500px;">
    <div class="fluid-media widescreen youku">
        <embed src="http://player.youku.com/player.php/sid/XNTMzMjg4Nzky/v.swf" allowFullScreen="true" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>
    </div>
</div>

父容器 100% 宽度（自适应）

改变浏览器窗口大小，视频自动等比缩放。

</embed>

<div class="well">
    <div class="fluid-media widescreen youku">
        <embed src="http://player.youku.com/player.php/sid/XNTMzMjg4Nzky/v.swf" allowFullScreen="true" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>
    </div>
</div>

窄屏 4:3

使用 Class narrowscreen

</embed>

未知高度垂直居中组件

有很多方案可以让一个未知高度的元素垂直居中，但是为了更好的通用性，cube 选择使用空标签的方案来实现居中，这样可以兼容图片，单行、多行文字以及图文混排。

单行文字

单行文字垂直居中

<div class="center-box well" style="height: 60px;">
    <b class="center-hack"></b>
    <div class="center-body">
        单行文字垂直居中
    </div>
</div>

多行文字

春天的雪总是不期而至，和人一样。远处池塘亲吻着翩翩的雪花，泛起涟漪，初恋一般…雪停了，池塘总是在雪花消融后怀念她的模样……

<div class="center-box well" style="height: 100px;">
    <b class="center-hack"></b>
    <div class="center-body">
        春天的雪总是不期而至，和人一样。远处池塘亲吻着翩翩的雪花，泛起涟漪，初恋一般…雪停了，池塘总是在雪花消融后怀念她的模样……
    </div>
</div>

只有图片

<div class="center-box well" style="height: 320px;">
    <b class="center-hack"></b>
    <div class="center-body">
        <div class="center-img">
            <img src="http://ww4.sinaimg.cn/mw1024/90f78f62jw1ediottavmoj20ew0hs75z.jpg" width="200" alt="">
            <img src="http://ww4.sinaimg.cn/mw1024/90f78f62jw1ediottavmoj20ew0hs75z.jpg" width="160" alt="">
        </div>
    </div>
</div>

图文混排

当往事回首，你的笑容带不走。我心中那一丝哀愁，在每年秋天这个时候。

<div class="center-box well" style="height: 320px;">
    <b class="center-hack"></b>
    <div class="center-body">
        <img src="http://ww4.sinaimg.cn/mw1024/90f78f62jw1ediottavmoj20ew0hs75z.jpg" width="160" alt="">
        <div>当往事回首，你的笑容带不走。我心中那一丝哀愁，在每年秋天这个时候。</div>
    </div>
</div>