如何创建CSS框布局？

Question

我对Web开发很陌生，我想用CSS和HTML创建它：

我不确定如何做到这一点，因为我只有13岁并仍在学习。

我曾经尝试但却失败了：

.grey{
  height:300px;
  width:700px;
  background-color: #e5e5e5;
    z-index: 0;
}
.pink{
    height:150px;
  width:100px;
  background-color:#ff8a8a;
  padding-top: 0px;
  padding-right:0px;
  z-index: 1;
}

<div class="grey">   
<div class="pink"> </div>
  </div>

Answer 1

使用CSS内置的CSS网格。请参阅代码段。

.wrapper {
  display: grid;
  grid-template-columns:
  40%
  1fr
  1fr
  ;
  grid-template-rows:
  100px
  100px
  ;
  grid-template-areas:

  "box-1 box-2 box-4"
  "box-1 box-3 box-5"
  ;
  }

.box-1 {
  grid-area: box-1;
  background-color: grey;
}

.box-2 {
  grid-area: box-2;
  background-color: orange;
}

.box-3 {
  grid-area: box-3;
  background-color: lightblue;
}

.box-4 {
  grid-area: box-4;
  background-color: red;
}

.box-5 {
  grid-area: box-5;
  background-color: lightgreen;
}

<div class="wrapper">

  <div class="box-1"></div>
  <div class="box-2"></div>
  <div class="box-3"></div>
  <div class="box-4"></div>
  <div class="box-5"></div>

</div>

Answer 2

这是一个简单的例子：

<div class="container">
  <nav class="nav left">left</nav>
  <nav class="nav right">right</nav>
  <nav class="nav right1">right</nav>
</div>

CSS：

.container {
  display: flex;
  flex-flow: row;
  min-height: 50vh;

}
.left {
  flex: 5;
  background-color: grey;
  width: 70%;
}

.right {
  flex:2;
  background-color: green;
}

.right1 {
  flex:2;
  background-color: red;
}

Answer 3

使用flex：

＆＃13;

＆＃13;

.container {
  display: flex;
  justify-content: flex-start;
  background-color: #e5e5e5;
}

.box {
  height:150px;
  width: 50%;
  display: flex;
  flex-wrap: wrap;
}

.square {
  height: 50%;
  width: 50%;
}

.square--pink {
  background-color: #fb7378;
}

.square--orange {
  background-color: #fcbd8b;
}

.square--blue {
  background-color: #8ce0fd;
}

.square--green {
  background-color: #7cff83;
}

＆＃13;

<div class="container">   
  <div class="box"></div>
  <div class="box">
    <div class='square square--pink'></div>
    <div class='square square--orange'></div>
    <div class='square square--blue'></div>
    <div class='square square--green'></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

你应该查看css box模型顺便说一句，它会帮助你更好地理解如何为你的CSS构建你的HTML :)。

Answer 4

使用 Flexbox ，您可以执行以下操作：

.grey {
  display: flex; /* displays flex-items (children) inline */
  justify-content: flex-end; /* places the flex-item (.innerFlex) to the end of the horizontal line */
  height: 300px;
  width: 700px;
  max-width: 100%;
  background: #e5e5e5;
}

.innerFlex {
  display: flex;
  flex-wrap: wrap; /* enables wrapping */
  flex-basis: 200px; /* initial width set to 200px since its flex-items are 100px wide and you want them to wrap */
}

.pink {
  flex-basis: 100px; /* initial width set to 100px */
  height: 150px;
  background: orange;
  padding-top: 0;
  padding-right: 0;
}

.pink:nth-child(2) {background: red}
.pink:nth-child(3) {background: blue}
.pink:nth-child(4) {background: green}

<div class="grey">
  <div class="innerFlex"> <!-- additional wrapper -->
    <div class="pink"></div>
    <div class="pink"></div>
    <div class="pink"></div>
    <div class="pink"></div>
  </div>
</div>

使用 网格 ：

.grey {
  display: grid;
  grid-template: 150px 150px / auto 100px 100px;
  width: 700px;
  max-width: 100%;
  background: #e5e5e5;
}

.pink:nth-child(1) {grid-column: 2; background: orange}
.pink:nth-child(2) {background: red}
.pink:nth-child(3) {grid-column: 2; background: blue}
.pink:nth-child(4) {background: green}

<div class="grey">
  <div class="pink"></div>
  <div class="pink"></div>
  <div class="pink"></div>
  <div class="pink"></div>
</div>

Answer 5

.grey{
  height:300px;
  width:600px;
  background-color: #e5e5e5;
    z-index: 0;
}
.pink{
    height:150px;
  width:150px;
  background-color:#ff8a8a;
  padding-top: 0px;
  padding-right:0px;
  z-index: 1;
  float:right;
}
.green{
    height:150px;
  width:150px;
  background-color:green;
  padding-top: 150px;
  padding-right:0px;
  z-index: 1;
  float:right;
}
.skyblue{
    height:150px;
  width:150px;
  background-color:skyblue;
  padding-top: 0px;
  padding-right:0px;
  z-index: 1;
  float:right;
}
.orange{
    height:150px;
  width:150px;
  background-color:orange;
  padding-top: 150px;
  padding-right:0px;
  z-index: 1;
  float:right;
}

<div class="grey">
<div class="green">
<div class="pink">
  </div>
  </div>
  <div class="orange">
<div class="skyblue">
  </div>
  </div>
</div>

Answer 6

here is your solution.

<!DOCTYPE html>
<html>
 <head>
    <style type="text/css">
        div { height: 102px; float:right; width: 150px;z-index: 2; }
        .box{ width:600px;height:206px;background:grey;border:1px grey;z-index:0;float:left;}
        .red { background: red; }
        .green { background: green; }
        .blue { background: blue; clear: right; }
        .orange { background: orange; }

    </style>
 </head>
     <body>
        <div class="box">
                <div class="red"></div>
                <div  class="green"></div>
                <div  class="blue"></div>
                <div  class="orange"></div>
        </div>
    </body>
</html>