簡單CSS 布局

CSS Layout

CSS Layout 是對上下左右布局的一個簡單封裝，主要針對自己項目里面方便使用。
堅持組合大於繼承的原則，復雜的布局也是由簡單布局組成的，當你用習慣了，完全在布局上面不用再去寫CSS 啦~
所以不習慣margin/padding-top/right/bottom/left-*的同學可以忽略。
大家可以使用免費cdn 做測試： https://gitcdn.xyz/repo/wz2cool/css_layout/0.1/dist/layout.min.css
（PS: 非前端專攻人士，至於你們覺得好不好，反正我是用的挺爽的^_）
項目地址：https://github.com/wz2cool/css_layout

.fill

填充父節點全部空間。

.fill-height

填充父節點高度空間。

.fill-width

填充父節點寬度空間。

.float-right

向右浮動。

.float-left

向左浮動。

.margin-/top/right/bottom/left-xx

margin 的上下左右

.padding-/top/right/bottom/left-xx

padding 的上下左右

.horizontal-container

.fill-right

<div class="horizontal-container fill-right" style="height: 100px;">
    <div class="left-panel fill-height" style="background: #EE91AD; width: 150px;">
        left panel (auto)
    </div>
    <div class="right-panel fill-height" style="background: #7171D1;">
        right panel (fill rest)
    </div>
</div>

在線demo

.fill-left

<div class="horizontal-container fill-left" style="height: 100px;">
    <div class="right-panel fill-height" style="background: #7171D1;  width: 150px;">
        right panel (auto)
    </div>
    <div class="left-panel fill-height" style="background: #EE91AD;">
        left panel (fill rest)
    </div>
</div>

在線demo

.vertical-container

.fill-bottom

<div class="vertical-container fill-bottom" style="height: 400px;">
    <div class="top-panel" style="background: #EE91AD; height: 100px;">
        top panel (auto)
    </div>
    <div class="bottom-panel" style="background: #7171D1;">
        bottom panel (fill rest)
    </div>
</div>

在線demo

.fill-top

<div class="vertical-container fill-top" style="height: 400px;">
    <div class="top-panel" style="background: #EE91AD; ">
        top panel (fill rest)
    </div>
    <div class="bottom-panel" style="background: #7171D1;height: 100px;">
        bottom panel (auto)
    </div>
</div>

在線demo

complex hor-ver layout

<div class="vertical-container fill-bottom" style="height:300px;">
    <div class="top-panel">
        top (auto)
    </div>
    <div class="bottom-panel">
        <!-- need fill height width -->
        <div class="vertical-container fill-top fill">
            <div class="top-panel">
                <div class="left-panel fill-height">
                    left (auto)
                </div>
                <div class="right-panel fill-height">
                    <div class="horizontal-container fill-left fill">
                        <div class="right-panel fill-height">
                            right(auto)
                        </div>
                        <div class="left-panel fill-height">
                            center
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="bottom-panel">
            bottom panel (auto)
        </div>
    </div>
</div>

.center-container

.center-horizontal

<div class="center-container center-horizontal" style="background: #EE91AD; width: 200px; height: 50px">
    <div class="center-panel">
        center item
    </div>
</div>

.center-vertical

<div class="center-container center-vertical" style="background: #EE91AD; width: 200px; height: 50px">
    <div class="center-panel">
        center item
    </div>
</div>

ver-hor center

<div class="center-container center-vertical" style="background: #EE91AD; width: 200px; height: 50px">
    <div class="center-panel">
        <div class="center-container center-horizontal">
            <div class="center-panel">
                <span>*</span> center item
            </div>
        </div>
    </div>
</div>

仿照葡萄城舉例

正好看到別人舉例的一個布局： http://www.cnblogs.com/powertoolsteam/p/combine-flexbox-and-css-grids-for-layouts.html
我們立刻用我們的方法實現了一下: 在線demo

關注我　##

最后大家可以關注我和 css_layout項目 ^_
Follow @wz2cool Star Fork