使用 HTML 和 CSS 以正确的顺序显示图块答案

【问题标题】：Displaying tiles in the correct order using HTML and CSS使用 HTML 和 CSS 以正确的顺序显示图块
【发布时间】：2016-06-06 14:06:44
【问题描述】：

我正在尝试在一个空网页的 div 容器中获取此结果。

到目前为止，我已经完成了这个：这与我的目标相去甚远。我不太明白元素（或我猜在这个例子中的容器）是如何放置在页面上的，或者我如何以我想要的方式显示它们。当然，我可以使用绝对位置和尺寸，但是我需要它对于不同的分辨率是“灵活的”，并且我需要在稍后使用 jQuery 做一些动画，以改变每个图块的位置和大小。到目前为止的页面结构如下：

<html>
    <head>
        <link href="style.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        <div class="wrapper" id="body-wrapper">
            <div id="menu-wrapper">
                <div id="menu-area">
                    <a href="#mat1">
                        <span class="me medium_box" id="mat1">
                        </span>
                    </a>
                    <a href="#mat2">
                        <span class="me large_rectangle" id="mat2">
                        </span>
                    </a>
                    <a href="#mat3">
                        <span class="me medium_rectangle" id="mat3">
                        </span>
                    </a>
                    <a href="#mat4">
                        <span class="me small_box" id="mat4">
                        </span>
                    </a>
                    <a href="#mat5">
                        <span class="me large_rectangle" id="mat5">
                        </span>
                    </a>
                    <a href="#mat6">
                        <span class="me vertical_medium_rectangle" id="mat6">
                        </span>
                    </a>
                </div>
            </div>
        </div>
    </body>
</html>

这是样式表（style.css）：

.wrapper {
    width: 100%;
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    background: #41B1E1;
    overflow: hidden;
}

#menu-wrapper {
    width: 1000px;
    height: 100%;
    border: 1px solid rgba(0, 0, 0, 0.5);
}

.me {
    color: white;
}

.small_box {
    display: inline-block;
    width: 125px;
    height: 125px;
    background-color: white;
}

.medium_box {
    display: inline-block;
    width: 250px;
    height: 250px;
    background-color: white;
}

.large_rectangle {
    display: inline-block;
    width: 375px;
    height: 125px;
    background-color: aquamarine;
}

.medium_rectangle {
    display: inline-block;
    width: 250px;
    height: 125px;
    background-color: mediumaquamarine;
}

.vertical_medium_rectangle {
    display: inline-block;
    width: 125px;
    height: 250px;
    background-color: white;
}

#menu-area {
    width: 100%;
    height: 450px;
    border: 1px solid azure;
    margin-top: 10%;
} 

a {
    text-decoration: none;
}

#mat1 {
    float: left;
    margin-right: 6px;
}

#mat2 {
    float: left;
}

#mat3 {

}

【问题讨论】：

1.你为什么不为此使用插件？ 2. 应该使用 flexbox 而不是 inline-boxes 和 float。不可能实现您尝试的方式。阅读 CSS 中的 flexbox。
嗯，我不知道你指的是什么插件或你的意思，我也不知道弹性盒是什么。我在这个领域没有太多经验，我还是个初学者：/ 编辑：将检查 flexbox，谢谢。
只要谷歌“jquery plugin tiles”，你就可以找到一个。我确信 Angular Material 具有瓷砖组件，该组件的工作方式应该与您尝试实现的功能类似，但它的依赖性太大，无法仅包含在此菜单中。
如果这里所有的东西都有固定的尺寸，就像看起来一样，你应该也可以简单地使用position: absolute。

标签： html css microsoft-metro tiles

【解决方案1】：

我设置了 jsfiddle，这样你就可以看到 position: absolute 在这种情况下是如何工作的。您应该可以从这一点开始。

https://jsfiddle.net/kdfxnfba/

【讨论】：