如何使用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

并不是说它真的有帮助，你需要知道css但是你走了。

＆＃13;

＆＃13;

header {
  background: red;
  height: 120px;
}
section, aside {
  height: 1000px;
}
article {
  height: 850px;
}
section {
  background: blue;
}
aside {
  float: left;
  background: yellow;
  width: 30%;
}
footer {
  width: 70%;
  background: green;
  height: 150px;
  float: right;
}

＆＃13;

<section>
  <header></header>
  <aside></aside>
  <article></article>
  <footer></footer>
</section>

＆＃13;

＆＃13;

＆＃13;

Answer 2

你可以这样做：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 code：

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