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

Question

我在网站上遇到断线问题。我是什么意思？ 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>

Answer 1

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

但是，在这种情况下，float 就是你的敌人。我对 flex 不是 100% 确定，据我所知，flex 会将所有元素保留在父元素内并防止滚动。

如果您采用绝对定位，(因为您已经定义了高度和宽度)

申请:

• position:relative 相对于 main 元素，如果子元素设置为 absolute ，它将成为子元素的基点>.

• overflow-x:滚动到main元素。当您增加第二个元素的宽度时，它将允许您水平滚动。

• position:absolute在.first、.second、.third上，因为您有高度和宽度 定义了，现在相应地设置它们的位置，检查代码片段，你就会得到它。

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

提示:始终保持 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>