需要帮助拳击Divs html

Question

我试图将我的彩色div盒并排放置，但是我的下两个div有问题。黄色的div是蓝色的。我怎样才能像绿色和红色那样并排得到它？我的问题与我如何浮动一切有关吗？我需要在不使用链接的css文档的情况下完成此任务。

div.div1 {
  border: 2px solid black;
  background-color: crimson;
  margin: 5px;
  width: 200px;
  height: 200px;
  float: left;
}

div.div2 {
  border: 2px solid black;
  background-color: green;
  margin: 5px;
  width: 200px;
  height: 200px;
  float: left;
  box-shadow: 0px 0px 10px 3px #888888;
}


}
div.div3 {
  border: 2px solid black;
  background-color: blue;
  margin: 5px;
  width: 200px;
  height: 200px;
  float: left;
  box-shadow: 0px 0px 10px 3px #888888;
}

}
div.div4 {
  border: 2px solid black;
  background-color: yellow;
  margin: 5px;
  width: 200px;
  height: 200px;
  float: left;
  box-shadow: 0px 0px 10px 3px #888888;
}
div {
  border: 2px solid black;
  height: 425px;
  width: 425px;
}

<div class="div1">


</div>

<div class="div2">

</div>
<div>
  <div class="div3">

    <div class="div4">


    </div>

这是我的输出的样子。黄色的div是蓝色的。

我正试图让我的div看起来与这张照片相似。

Answer 1

如果清除浮动，在关闭div并移除额外的}后，它将如下所示：

＆＃13;

＆＃13;

div.div1 {
  border: 2px solid black;
  background-color: crimson;
  margin: 5px;
  width: 200px;
  height: 200px;
  float: left;
}

div.div2 {
  border: 2px solid black;
  background-color: green;
  margin: 5px;
  width: 200px;
  height: 200px;
  float: left;
  box-shadow: 0px 0px 10px 3px #888888;
}

div.div3 {
  border: 2px solid black;
  background-color: blue;
  margin: 5px;
  width: 200px;
  height: 200px;
  float: left;
  box-shadow: 0px 0px 10px 3px #888888;
}

div.div4 {
  border: 2px solid black;
  background-color: yellow;
  margin: 5px;
  width: 200px;
  height: 200px;
  float: left;
  box-shadow: 0px 0px 10px 3px #888888;
}
.break { clear:left }
.container {
  border: 2px solid black;
  height: 430px;
  width: 430px;
}

＆＃13;

<div class="container">
  <div class="div1">
  </div>
  <div class="div2">
  </div>

  <br class="break" />

  <div class="div3">
  </div>
  <div class="div4">
  </div>

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

首先，你的代码很乱。你不需要每个div的seporate样式标签。我建议使用absolute和relative定位而不是浮动。只需将每个div放在类box下，并给出以下样式：

div.box {
  border: 2px solid black;
  width: 200px;
  height: 200px;
  position: absolute;
}

然后使用ID或使用nth-of-type()选择器单独选择每个选项，如下所示：

div.box:nth-of-type(1) {
  background-color: crimson;
  top: 5px;
  left: 5px;
}
div.box:nth-of-type(2) {
  background-color: green;
  top: 5px;
  right: 5px;
}
div.box:nth-of-type(3) {
  background-color: blue;
  bottom: 5px;
  left: 5px;
}
div.box:nth-of-type(4) {
  background-color: yellow;
  bottom: 5px;
  right: 5px;
}

最后将box包裹在一个div中，并将该类container赋予它并给它以下样式：

div.container {
  border: 2px solid black;
  height: 425px;
  width: 425px;
  position: relative;
}

＆＃13;

＆＃13;

div.container {
  border: 2px solid black;
  height: 425px;
  width: 425px;
  position: relative;
}
div.box {
  border: 2px solid black;
  width: 200px;
  height: 200px;
  position: absolute;
}
div.box:nth-of-type(1) {
  background-color: crimson;
  top: 5px;
  left: 5px;
}
div.box:nth-of-type(2) {
  background-color: green;
  top: 5px;
  right: 5px;
}
div.box:nth-of-type(3) {
  background-color: blue;
  bottom: 5px;
  left: 5px;
}
div.box:nth-of-type(4) {
  background-color: yellow;
  bottom: 5px;
  right: 5px;
}

＆＃13;

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

CodePen

Answer 3

您可以利用inline-block。

＆＃13;

＆＃13;

.mainbox {
  width: 420px;
  height: 420px;
  border: 3px solid black;
}

.col-1 {
  width: 200px;
  height: 200px;
  background: red;
  margin: 2px;
  border: 1px solid black;
  display: inline-block;
}

.col-2 {
  display: inline-block;
  width: 200px;
  height: 200px;
  background: yellow;
  margin: 2px;
  border: 1px solid black;
}

.col-3 {
  display: inline-block;
  width: 200px;
  height: 200px;
  background: green;
  margin: 2px;
  border: 1px solid black;
}

.col-4 {
  display: inline-block;
  width: 200px;
  height: 200px;
  background: blue;
  margin: 2px;
  border: 1px solid black;
}

＆＃13;

<div class="mainbox">
  <div class="row-1">
    <div class="col-1"></div>
    <div class="col-2"></div>
  </div>

  <div class="row-2">
    <div class="col-3"></div>
    <div class="col-4"></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;