Question

我刚刚开始设计，所以我试图将模块设置为像素宽度。为什么模块不占用更多的高度空间。我应该加高吗？如果是百分比或像素或ems？我错过了什么？

<!DOCTYPE html>

<head>
<title> AZKF </title>
<link type="text/css" rel="stylesheet" href="reset.css"/>
<link type="text/css" rel="stylesheet" href="styles.css"/>
</head>
<body class="page">

    <div class="blog">

        <div class="main">

        </div>
        <div class="other">

        </div>
    </div>
</body>

</html>

.page {
    width: 960px;
    margins: 0 auto;
}

.page {
    background-color: #3a434a;
}

.blog {
    width: 900px;
    margins: 0 auto;
}

.blog {
    background-color: blue;

}

.main {
    background-color: green;
    width: 566px;
    margins: 0 auto;
    float: left;

}

.other {
    backpround-color: black;
    width: 331px;
    margins: 0 auto;
    float: right;
}

Answer 1

试试这个css：

.page {
        float: left;
        margin: 0;
        overflow: hidden;
        padding: 0;
        width: 100%;
    }

    .blog {
        float: left;
        width: 100%;
    }



    .main {
        background-color: green;
        float: left;
        width: 60%;
    }
    .other {
        background-color: black;
        width: 40%;
        float: right;
    }

Answer 2

使用以下代码

.page { 
    border:1px solid red;
    background-color: #3a434a;
}
.blog { 
    position: relative;
    width: 1170px;
    margin: 0 auto;
}
.blog {
    background-color: blue;
} 
.main {
    background-color: green;
    width: 66.66666667%;
    margin: 0 auto;
    float: left;
    border:1px solid yellow;
    padding:30px 0px;
}
.other {
    background-color: black;
    width: 32.33333333%;
    border:1px solid red;
    margins: 0 auto;
    padding:30px 0px;
    float:left;
}

为什么我的流体网格布局不起作用？

2 个答案: