时间戳

首页 > 解决方案 > 不能将主要内容放在中心

html - 不能将主要内容放在中心

问题描述

我已经使用flexbox典型网站的外观进行布局，但我有几个问题和几个问题。我的第一个问题是如何改进这种布局？我遇到的问题是我不能把main__content颜色black放在两者之间aside..

*{

    margin: 0;
    padding:0;
    line-height: 1.3em;
    color: black;
    font-size: 40px;
}

body{
        background: lightslategray;
}

.header{

    display: flex;
}

.zero{
    height: 100vh;
    width: 200px;
    background: violet;
    
}

.one{

    height: 200px;
    width: 200px;
    background: blue;
    flex-grow: 2;}

.two{
    height: 200px;
    width: 200px;
    background: red;
    flex-grow: 2;

}

.aside {
    display: flex;
 
}

.three{
    height: 200px;
    width: 200px;
    background: green;

}

.four{
    height: 100vh;
    width: 200px;
    background: yellow;
    margin-left: auto;
    

}

.main .content{

    height: 50vh;
    width: 40vh;
    background-color: black;
}
<body>

    <div class="header">
        <div class="one">content</div>
        <div class="two">content</div>
        <div class="three">content</div>

    </div>
    <div class="aside">
        <div class="zero">sidebar</div>
        <div class="four">sidebar</div>
    </div>

    <div class="main">
        <div class="content">Main__content</div>
    </div>
</body>

标签： htmlcsslayoutflexboxalignment

解决方案

在这里，您正在尝试将样式应用于主要和内容

.main .content{
    
        height: 50vh;
        width: 40vh;
        background-color: black;
    }

所以子 div（内容）的高度和宽度与其父 div（主）相同

尝试申请：

.main {

        height: 50vh;
        width: 40vh;
        background-color: black;
        }


.content {
    color: brown;
    height: 100px;
    font-size: 20px;
}

推荐阅读