html - 如何制作这种布局？（三重嵌套 Div）

Question

我在下面制作了一个我想要创建的快速线框图。我只是想将 childDiv 左侧的 25% 突出显示为绿色，将右侧的 65% 突出显示为红色。

我想建立正确的空间，让左 childInnerDiv 为绿色，右 childInnerDiv 为红色。但这似乎不起作用...

我正在尝试创建的内容：

我有的：

JsFiddle：http: //jsfiddle.net/8vhgq6k3/

HTML 代码

        <div class="ProjectsParentDiv">
            <div class="childDiv">
                Foo
                <div class="childInnerDiv left">

                </div>
                <div class="childInnerDiv right">
                    
                </div>
            </div>
            <div class="childDiv">
                Bar
            </div>
            <div class="childDiv">
                Baz
            </div>
        </div>

CSS 代码

.ProjectsParentDiv {
    // position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: max-width;
    height: 40%;
    border: 1px solid black;
}

.childDiv {
    display: flex;
    background-color: lightblue;
    width: 75%;
    height: 150px;
    margin: 5px auto;
}

.childInnerDiv {
    //trying to make the childInnerDiv to be 95% height & width. of the ChildDiv
    height: 95%;
    width: 95%;
}

.childInnerDiv.left {
    flex: 25; //25% of the left side is a div for image.
    background: green;
    border: 1px solid yellow;
}

.childInnerDiv.right {
    flex: 65; //65% of right side is a div for description
    background: red;
    border: 1px solid silver;
}

标签： htmlcsssassflexbox

Answer 1

你可以在下面做。

.ProjectsParentDiv {
    // position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: max-width;
    height: 40%;
    border: 1px solid black;
}

.childDiv {
    align-items: center;
    display: flex;;
    justify-content: space-around;
    background-color: lightblue;
    width: 75%;
    height: 150px;
    margin: 5px auto;
}

.childInnerDiv {
    display: flex;
    height: 95%;
}

.childInnerDiv.left {
    width: 25%; 
    background-color: green;
    border: 1px solid yellow;
}

.childInnerDiv.right {
    width: 65%;
    background-color: red;
    border: 1px solid silver;
}

<div class="ProjectsParentDiv">
    <div class="childDiv">
        <div class="childInnerDiv left">

        </div>
        <div class="childInnerDiv right">

        </div>
    </div>
    <div class="childDiv">
        Bar
    </div>
    <div class="childDiv">
        Baz
    </div>
</div>