用于设计 Metro 风格网站的 CSS 和 JS 技术答案

【问题标题】：CSS and JS techniques for designing Metro style website用于设计 Metro 风格网站的 CSS 和 JS 技术
【发布时间】：2012-12-10 14:19:15
【问题描述】：

我正在使用this code 建立一个网站

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Title</title>
    <style>
        body {
            padding: 0;
            margin: 0;
            background-color: #dcf0f9;
            direction : rtl;
        }

        .clearfix:before, .clearfix:after {
            content: "";
            display: table;

        }

        .clearfix:after {
            clear: both;
        }

        .tile_1_1 {
            width: 120px;
            height: 120px;
        }

        .tile_2_1 {
            width: 248px;
            height: 120px;
        }

        .tile_2_2 {
            width: 248px;
            height: 248px;
        }

        .tile_1_2 {
            width: 120px;
            height: 248px;
        }

        .tile_4_3 {
            width: 504px;
            height: 376px;
        }

        .tile {
            float: right;
            margin: 4px;
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
        }

        .bottom {
            margin-bottom: 0;
        }

        .bottom_left {
            margin: 4px 4px 0 0;
        }

        .bottom_right {
            margin: 4px 0 0 4px;
        }

        .bottom_left_right {
            margin: 4px 0 0 0;
        }

        .top {
            margin-top: 0;
        }

        .top_left {
            margin: 0 4px 4px 0;
        }

        .top_right {
            margin: 0 0 4px 4px;
        }

        .top_left_right {
            margin: 0 0 4px 0;
        }

        .left {
            margin-left: 0;
        }

        .right {
            margin-right: 0;
        }

        .left_right {
            margin: 4px 0 4px 0;
        }

        .column_4 {
            width: 504px;
            float: right;
        }

        .column_2 {
            width: 248px;
            float: right;
        }

        .column_left {
            margin: 0 4px 0 0;
        }

        .column_midde {
            margin: 0 4px 0 4px;
        }

        .column_right {
            margin: 0 0 0 4px;
        }

        .backToOrigin {
            margin-top: -120px;
        }

        #container {
            margin-top: 150px;
            width: 3000px;
        }

        #sectionA {
            float: right;
            width: 1016px;
        }

        #sectionB {
            float: right;
            width: 504px;
            margin-right: 112px;
        }

        #slideShow {
            background-color: #aaa;
        }

        .typeB {
            background-color: #21b044;
        }

        .typeA {
            background-color: #1f65c5;
        }

        .typeC {
            background-color: #21b1e5;
        }

        .redBox {
            background-color: #fd3f1b;
        }

        .yellowBox {
            background-color: #fdbe21;
        }

        .greyBox {
            background-color: #5a5a5a;
        }

        .greenBox {
            background-color: green;
        }
    </style>
</head>
<body>
    <div id="container" class="clearfix">
        <section id="sectionA">
            <div class="column_4 column_right">
                <div id="slideShow" class="tile_4_3 tile top_left_right"></div>
                <div class="tile_2_1 tile tile bottom_right typeA"></div>
                <div class="tile_1_1 tile bottom typeB"></div>
                <div class="tile_1_1 tile bottom_left typeA"></div>
            </div>
            <div class="column_2 column_midde">
                <div class="tile_2_1 tile top_left_right typeB"></div>
                <div class="tile_1_1 tile right typeA"></div>
                <div class="tile_1_1 tile left yellowBox"></div>
                <div class="tile_1_1 tile right typeB"></div>
                <div class="tile_1_2 tile bottom_left typeA"></div>
                <div class="tile_1_1 tile bottom_right redBox backToOrigin"></div>
            </div>
            <div class="column_2 column_left">
                <div class="tile_1_1 tile top_right typeA"></div>
                <div class="tile_1_1 tile top_left typeC"></div>
                <div class="tile_2_1 tile left_right greyBox"></div>
                <div class="tile_2_2 tile bottom_left_right typeC"></div>
            </div>
        </section>
        <section id="sectionB">
            <div class="column_2 column_right">
                <div class="tile_2_1 tile top_right typeA"></div>
                <div class="tile_1_1 tile right typeC"></div>
                <div class="tile_1_1 tile left typeA"></div>
                <div class="tile_2_2 tile bottom_left_right greenBox"></div>
            </div>
            <div class="column_2 column_left">
                <div class="tile_1_1 tile top_right greenBox"></div>
                <div class="tile_1_1 tile top_left yellowBox"></div>
                <div class="tile_2_1 tile left_right typeC"></div>
                <div class="tile_1_2 tile bottom_right typeA"></div>
                <div class="tile_1_1 tile left typeB"></div>
                <div class="tile_1_1 tile bottom_left greyBox"></div>
            </div>
        </section>
    </div>
</body>

我使用浮动在页面中放置图块

我知道这不是这种设计的最佳方法

我希望这些图块将来是动态的，我的意思是我将添加 JS 用于拖放和移动这些图块并相互推动以适合该位置，另一件事是我想设计这个页面响应，我的意思是调整窗口大小这些瓷砖移动并改变它们的位置和调整大小

我检查了gridster plugin，但需要从头开始才能获得更多功能

这是我的问题：

有没有更好的 CSS 解决方案，而不是使用浮动和不定位？（绝对、相对和...）

（不与以后的JS和上面的语句冲突）

支持 IE8 对我来说很重要

感谢您的帮助，这也是我的第一个 STACKOVERFLOW 问题；）

【问题讨论】：

为什么不使用 position:absolute？（顺便说一句，我有幸发表评论，太兴奋了！！！：D）
@DumbProducts - position: absolute 会使拖放和调整大小变得更加困难。但是，我真的想不出更好的方法......我认为实现所有这些的 JavaScript 必须相当复杂。
感谢您的评论，亲爱的，您对使用 JS 的看法是正确的

标签： javascript css jquery-plugins user-interface microsoft-metro

【解决方案1】：

我创建了类似的东西，我只使用 float <div>s 来制作这些块。见my example。它适用于所有浏览器，希望对您有所帮助。

编辑：更新示例以显示使用不同大小的块时的布局。不过，该示例仅使用 1 个<div> 标签作为目标。

【讨论】：

这似乎不允许您在大块的左侧堆叠两个小块。您最终会得到无法使用的空白。
如果每个块的大小不同，可能会有不可用的空格。
使用多个<div>s作为目标即可解决问题。
再次感谢，我没有足够的声誉来投票赞成你的答案:)
你不必投赞成票...只需用小检查器标记为答案需要上/下投票按钮，就可以了...

【解决方案2】：

您可能想查看fluidsquares 之类的内容，因为我认为这就是您想要达到的效果？

Here 是一篇关于它的博文。

【讨论】：

非常感谢，我想我应该将此解决方案与@user1823713 的解决方案结合起来