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

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>

希望这就是你要找的