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

【问题标题】：Floating right pushes div to the end of the page向右浮动将 div 推到页面末尾
【发布时间】：2019-06-01 06:33:34
【问题描述】：

我正在尝试将 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);
}

【问题讨论】：

只需删除浮动；对

标签： html css position css-float

【解决方案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);
}

【讨论】：

【解决方案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>

希望这就是你要找的东西

【讨论】：