javascript - 如何设置元素水平生长而不是换行？

我在网站上断线时遇到问题。我什么意思
HTML代码

<main class="clearfix">
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</main>

<button>Add</button>

有了这样的HTML代码，我希望拥有：


主元素上的固定高度（例如80vh）
所有元素的固定高度，第一和第三40vh +第二80vh
第一和第三元素的固定宽度50vw
第二个元素的流体宽度-但这是主要问题-第二个元素必须在同一位置并水平生长（以便在站点底部创建滚动条）


请找到我的codepen

我添加了将像素添加到第二个元素的按钮-但它破坏了我的网站。

我不确定flexbox是否比float更好。

我将不胜感激。

这是代码段：

let counter = 0;
document.querySelector("button").addEventListener("click", function() {
  document.querySelector(".second").style.width = `calc(50% + ${counter}px)`;
  console.log(counter);
  counter++;
});

* {
  padding: 0;
  margin: 0;
}

main {
  max-height: 80vh;
}

.first,
.third {
  height: 40vh;
  width: 50vw;
  background-color: black;
  float: left;
}

.third {
  background-color: red;
}

.second {
  height: 80vh;
  width: 50%;
  float: right;
  background-color: blue;
}

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

<main class="clearfix">
  <div class="first"></div>
  <div class="second"></div>
  <div class="third"></div>
</main>

<button>Add</button>

最佳答案

我建议您使用position属性。因为您在DOM元素的顺序和它们的视觉表示之间有一点点差异，例如DOM中的1,2,3，但在视觉上更像是1,3,2。

但是，在这种情况下，float是您的敌人。我不是100％知道flex，AFAIK flex会将所有元素保留在父元素内并阻止滚动。

如果采用absolute定位，（因为已经定义了高度和宽度）

应用：


position: relative到main元素，如果将它们设置为absolute，它将成为子元素的基点。
overflow-x: scroll到main元素。当您增加第二个元素的宽度时，它将允许您水平滚动。
在定义了position: absolute和.first, .second, .third的情况下，在height上的width，现在相应地设置它们的位置，检查代码段，您将获得它。


最后，您可以为目标元素的宽度增加更多的值。

提示：始终保持CSS单位的一致性，例如，如果使用vh / vw至少将其用于类似元素，或者如果使用px / em / rem，请尝试使用相应地也一样。

在整页模式下检查代码段

let counter = 0;
document.querySelector("button").addEventListener("click", function() {
  document.querySelector(".second").style.width = `calc(50vw + ${counter}vw)`;
  document.querySelector("#added").textContent = counter;
  counter++;
});

* {
  padding: 0;
  margin: 0;
}

main {
  overflow-x: scroll;
  position: relative;
  min-height: 80vh;
}

.first,
.third {
  height: 40vh;
  width: 50vw;
  background-color: black;
  position: absolute;
  left: 0;
  top: 0;
}

.third {
  background-color: red;
  top: 40vh;
}

.second {
  height: 80vh;
  width: 50vw;
  background-color: blue;
  position: absolute;
  left: 50vw;
  top: 0;
}

button {
  margin: 30px 5px;
  border: 1px solid #cecece;
  padding: 5px 10px;
}

<main>
  <div class="first"></div>
  <div class="second"></div>
  <div class="third"></div>
</main>

<button>Add</button>

<p><span id="added">0</span>vw Added to blue div's width</p>

关于javascript - 如何设置元素水平生长而不是换行？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56100067/