html - 为什么我的流体网格布局不起作用?

标签 html css

我刚刚开始设计,所以我试图将模块设置为像素宽度。为什么模块不占用更多的高度空间。我应该增加高度吗?如果是百分比或像素或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;
}

最佳答案

试试这个 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;
    }

关于html - 为什么我的流体网格布局不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27977983/

相关文章:

javascript - 动态改变 Awesome Icon 的颜色

javascript - Bootstrap 和谷歌应用引擎

javascript - JS : css property and value in one variable

jquery - 中心导航栏列表元素?

html - div没有定位

javascript - 在nodejs中关闭浏览器时删除 session

html - 坚持使用 Bootstrap 的列

html - 使用 CSS 动画上下滑动

html - 下拉 CSS 冲突

jquery - 如何在标题标签中隐藏特定文本,该标签对许多文本具有相同的标签