Question

我正在尝试将2个div并排放置。但是，这样做时，将一个div推到页面的最右边吗？我不确定为什么要这样做。任何帮助表示赞赏：）

JSFIDDLE： https://jsfiddle.net/7crhg2L8/

HTML：

<div class="navrectangle"></div>
<div class="addrectangle"></div>

CSS：

.navrectangle{
  width: 20Vw;
  height: 100vh;
background-image: linear-gradient(to right, #002067, #013d98);
float: left;
}
/** SECOND RECTANGLE **/
.addrectangle{
  float:right;
  width: 20Vw;
  height: 100vh;
background-image: linear-gradient(to right, #002067, #013d98);
}

Answer 1

您需要向左浮动两个div，以使它们彼此相邻。

.navrectangle{
  width: 20Vw;
  height: 100vh;
background-image: linear-gradient(to right, #002067, #013d98);
float: left;
}
/** SECOND RECTANGLE **/
.addrectangle{
  float:left;
  display: inline-block;
  width: 20Vw;
  height: 100vh;
background-image: linear-gradient(to right, #002067, #013d98);
}

Answer 2

将div放在父div中，并设置父div的样式以使两个div的宽度相结合（在您的情况下为40vw）。

CSS：

.navrectangle {
  width: 20vw;
  height: 100vh;
  background-image: linear-gradient(to right, #002067, #013d98);
  float: left;
}
/** SECOND RECTANGLE **/
.addrectangle {
  float:right;
  display: inline-block;
  width: 20vw;
  height: 100vh;
background-image: linear-gradient(to right, #002067, #013d98);
}

#container {
  width: 40vw;
}

HTML：

<div id="container">
<div class="navrectangle"></div>
<div class="addrectangle"></div>
</div>

希望这就是您想要的

向右浮动将div推到页面末尾

2 个答案: