Question

我试图在空网页上的div容器中获取此结果。

到目前为止，我最终得到了这个：这远非我想要获得的目标。我不太清楚如何在页面上放置元素（或我在这个例子中猜测的容器），或者我如何以我想要的方式显示它们。当然，我可以使用绝对位置和尺寸，但我需要它是灵活的＆＃39;对于不同的分辨率，我需要稍后使用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 {

}

Answer 1

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

https://jsfiddle.net/kdfxnfba/

使用HTML和CSS以正确的顺序显示切片

1 个答案: