-1

我想知道是否可以制作嵌套列或其他方式来实现这种布局。

https://github.com/BadCo55/POS-TEST.git

这就是我试图实现它的div方式，在 .. 的内部div。我正在寻找的是“第 4 列”位于同一行的“第 3 列”的右侧。

这是一张照片，对我正在寻找的布局进行了更好的描述：

设计布局

4

1 回答 1

1

有几种方法可以做到这一点。您可以查找浮动、弹性或网格布局。既然你用 flexbox 发布了一些代码，我也做了同样的事情。

这是我的提议，以重现您所附的屏幕截图：

* {
    box-sizing: border-box;
}

/* This section is the grid method */

.Grid {
    display: flex;
    flex-wrap: wrap;
    flex-grow: 1;
    width: calc(100% + 30px);
    margin: calc(30px / -2);
}

.Grid__Item {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    margin: calc(30px / 2);
}

/* Modifiers */
.Grid__Item--oneWhole {
    width : 100%;
}

.Grid__Item--oneHalf {
    width : calc(100% / 2 - 30px);
}

/* This styles the content */

.Content {
    display: flex;
    justify-content: center;
    align-items: center;
    padding : 30px;
    width: calc(100% - 20px);
    margin : 10px;
    font-size : 10px;
    font-weight: 600;
    font-family: sans-serif;
    text-transform: uppercase;
}

/* This styles the borders */

.Border {
    border : solid 1px black;
}

.Border--red {
    border-color: red;
}

.Border--orange {
    border-color: orange;
}
<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="container">
        <h1><span>Diversified </span>Home Inspections</h1>

        <div class="Grid">
            <!-- Column - 50% width -->
            <div class="Grid__Item Grid__Item--oneHalf Border Border--red">

                <!-- We add another grid to split our layout one more time -->
                <div class="Grid">

                    <!-- Column - 100% width (next ones will go below) -->
                    <div class="Grid__Item Grid__Item--oneWhole Border Border--orange">
                        <div class="Content Border Border--orange">
                            <span>Content 1</span>
                        </div>
                    </div>

                    <!-- Column - 50% width -->
                    <div class="Grid__Item Grid__Item--oneHalf Border Border--orange">
                        <div class="Grid">
                            <div class="Grid__Item Grid__Item--oneWhole">
                                <div class="Content Border Border--orange">
                                    <span>Content 2_1</span>
                                </div>
                            </div>
                            <div class="Grid__Item Grid__Item--oneWhole">
                                <div class="Content Border Border--orange">
                                    <span>Content 2_2</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Column - 50% width -->
                    <div class="Grid__Item Grid__Item--oneHalf Border Border--orange">
                        <div class="Grid">
                            <div class="Grid__Item Grid__Item--oneWhole">
                                <div class="Content Border Border--orange">
                                    <span>Content 3_1</span>
                                </div>
                            </div>
                            <div class="Grid__Item Grid__Item--oneWhole">
                                <div class="Content Border Border--orange">
                                    <span>Content 4_1</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Column - 50% width -->
            <div class="Grid__Item Grid__Item--oneHalf Border Border--red">
                <div class="Content Border Border--orange">
                    <span>Content 4</span>
                </div>
                <div class="Content">
                    <button>Button</button>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

于 2020-09-01T02:10:35.853 回答