Javascript 如何将元素设置为水平增长，而不是断开到新行？

我面临着在网站上突破底线的问题。我是什么意思？ HTML代码

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

<button>Add</button>

*{
填充：0；
保证金：0；
}
主要{
最大高度：80vh；
}
第一
.第三{
高度：40vh；
宽度：50vw；
背景色：黑色；
浮动：左；
}
.第三{
背景色：红色；
}
.第二{
高度：80vh；
宽度：50%；
浮动：对；
背景颜色：蓝色；
}
.clearfix:：之后{
内容：“；
显示：表格；
明确：两者皆有；
}

添加

我建议您使用

位置

属性。因为DOM元素的顺序和它们的视觉表示之间有一点不同，比如DOM中的1,2,3，但是视觉上更像1,3,2

然而，在这种情况下，

float

是你的敌人。我不是100%确定flex，AfaikFlex会将所有元素保留在父元素中，并防止滚动

如果使用

absolute

定位（因为已经定义了高度和宽度）

适用于：

• 位置：相对于
  主
  元素，如果子元素设置为
  绝对
  ，则它将是子元素的基点
  

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

• position:absolute

  在

  .first、.second、.third

  上，当您定义了

  高度和
  宽度时，现在相应地设置它们的位置，检查代码段，您就会得到它
  

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

提示：始终保持css单元的一致性，例如，如果使用了

vh

/

vw

至少将其用于类似的元素，或者如果使用了

px

/

em

/

rem

，则尝试相应地使用相同的元素

以整页模式检查代码段

let计数器=0；
document.querySelector（“按钮”）.addEventListener（“单击”，函数）（）{
document.querySelector（“.second”）.style.width=`calc（50vw+${counter}vw）`；
document.querySelector（“#added”）.textContent=计数器；
计数器++；
});
*{
填充：0；
保证金：0；
}
主要{
溢出-x：滚动；
位置：相对位置；
最小高度：80vh；
}
第一
.第三{
高度：40vh；
宽度：50vw；
背景色：黑色；
位置：绝对位置；
左：0；
排名：0；
}
.第三{
背景色：红色；
顶部：40vh；
}
.第二{
高度：80vh；
宽度：50vw；
背景颜色：蓝色；
位置：绝对位置；
左：50vw；
排名：0；
}
钮扣{
利润率：30px 5px；
边框：1px实心#cecece；
填充物：5px10px；
}

添加
将0vw添加到blue div的宽度中
您在这里实际想要实现什么？点击按钮会做什么？我理解您的第一个要求，比如第一个和第三个元素将位于左侧，第一个元素位于顶部，第三个元素位于底部，第二个元素将占据第一个和第三个元素的总高度。然后点击按钮会发生什么？我希望左侧有两个信息块，右侧有一个信息块（带有视觉元素）-用户可以向右侧块添加元素-因此它必须水平增长以显示所有元素-我不希望它位于下方或单独的部分。谢谢！我完全忽略了定位——这是个好主意——一切都很好。再次：谢谢@不客气。如果你认为答案也能帮助他人，请随意投票。谢谢