html - 如何使用 css 和 div 进行布局？

Question

我在为我的网站进行布局时遇到问题。基本上，我不知道 CSS，因此有人可以为 div 编写一个看起来像这样的 css 吗？我还没有找到任何可以解决我的问题的模板。我找到了这个

.left
{
   float: left;
   width: 15%;
}
.right
{
    float:right;
    width: 85%;
}
.right_bottom
{
    float:right;
    width: 85%;
    height: 4%;
}

但是没用

---

---

Answer 1

你可以这样做:Fiddle

CSS 代码:

.mainDiv {
    width:500px;
    height:500px;
}
.topDiv {
    height: 15%;
    background-color: black;
}
.left {
    float: left;
    width: 15%;
    height: 85%;
    background-color:red;
}
.right {
    float:right;
    width: 85%;
    height: 70%;
    background-color:green;
}
.right_bottom {
    float:right;
    width: 85%;
    height: 15%;
    background-color:blue;
}

HTML 代码:

<div class="mainDiv">
   <div class="topDiv"></div>
   <div class="left"></div>
   <div class="right"></div>
   <div class="right_bottom"></div>
</div>