向右浮动将 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 放在父级 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>

希望这就是您要找的东西

Answer 2

您需要将两个 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);
}

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

Floating right pushes div to the end of the page

html

css

position

css-float