css 我想在html中实现这个结构[关闭]

yhived7q 于 2023-06-25 发布在其他

关注(0)|答案(1)|浏览(154)

已关闭，此问题需要更focused。目前不接受答复。
**想改善这个问题吗？**更新问题，使其仅通过editing this post关注一个问题。

3小时前关闭
Improve this question
这个图像，我想要类似的结构（https://i.stack.imgur.com/4B9Yv.jpg）
请使用flexbox模型创建此结构。请分享代码。这一挑战也可在“apana college”Channal。这里是频道链接：-https：youtu.be/OGkaHOD6CRU
所以，你也可以看到这个挑战并回答我。

css

来源：https://stackoverflow.com/questions/76549125/i-want-to-achieve-this-structure-in-html

1条答案

按热度按时间

dsf9zpds1#

我们可以将布局分为3行和3列。
第一层div app 提供结构，并将子元素转换为flex。
第二级divs，top，middle 和 bottom 分别用于3行。而内部div则用于列。

top* 第一行有3个div。middle 有4个div，bottom 有5个div

第一个元素 first，行0，列0，被进一步划分以实现与其父元素相同的结构。
class first-first 的div用于第一行，还包含3个div。
class first-middle 的div用于中间行，还包含4个div。
类为 first-last 的最后一个div用于包含5个div的最后一行。

first-first、first-middle和first-last* 是白色背景的div。

HTML：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Home</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
       <div class="app">
            <div class="top">
                <div class="first">
                    <p>1</p>
                    <div class="first-first">
                        <div><p>1</p></div>
                        <div><p>2</p></div>
                        <div><p>3</p></div>
                    </div>
                    <div class="first-middle">
                        <div><p>1</p></div>
                        <div><p>2</p></div>
                        <div><p>3</p></div>
                        <div><p>4</p></div>
                    </div>
                    <div class="first-last">
                        <div><p>1</p></div>
                        <div><p>2</p></div>
                        <div><p>3</p></div>
                        <div><p>4</p></div>
                        <div><p>5</p></div>
                    </div>
                </div>
                <div><p>2</p></div>
                <div><p>3</p></div>
            </div>
            <div class="middle">
                <div><p>1</p></div>
                <div><p>2</p></div>
                <div><p>3</p></div>
                <div><p>4</p></div>
            </div>
            <div class="bottom">        
                <div><p>1</p></div>
                <div><p>2</p></div>
                <div><p>3</p></div>
                <div><p>4</p></div>
                <div><p>5</p></div>
       </div>
        <script src="script.js"></script>
    </body>
</html>

CSS：

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    color: white;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 1.125rem;
    padding: 1em;
}

p {
    margin: 0;
    padding: 0;
}

.app {
    display: flex;
    flex-direction: column;
    gap: .625em;
}

/* Main divs for columns */
.top,
.middle,
.bottom  {
    display: flex;
    flex-direction: row;
    gap: .625em;
}

/* Inner divs for row */

.top > div,
.middle > div,
.bottom > div {
    background-color: orange;
    padding: 0.5em 1em;
    padding-left: .5em;
    border-radius: 4px;
}

.top > div {
    width: 33.3vw;
    height: 200px;
}
.middle > div {
    width: 25vw;
}
.bottom > div {
    width: 20vw;
}

/* Inner divs of top */

.first {
    display: flex;
    flex-direction: column;
    gap: .312em;
    padding: 0;
}

.first-middle > div,
.first-first > div,
.first-last > div {
    width: 33.3vw;
    background-color: white;
    color: orange;
    padding: 0.5em 1em;
    padding-left: .5em;
    border-radius: 4px;
}

.first-first {
    display: flex;
    gap: .312em;
    height: 33.3vh;
}
.first-middle {
    display: flex;
    gap: .312em;
    height: 33.3vh;

}
.first-last {
    display: flex;
    gap: .312em;
    height: 33.3vh;

}

常见的CSS是组合的。

赞(0）回复(0）举报 2023-06-25

我来回答

css 我想在html中实现这个结构[关闭]

1条答案

相关问题

热门标签

最新问答