Javascript 如何检查两个元素是否显示在同一行上？

假设我在这样的响应性设计中有两个元素：

<div id="container">
    <div class="first"></div>
    <div class="second"></div>
</div>

因为我期望不同的屏幕大小来查看页面，所以，根据屏幕大小，有时它们会呈现/显示在同一行上，有时则不会！，第二个DIV将移动到单独的一行

所以，我想知道，我如何用JavaScript检查它们是否在同一行上

---

谢谢

页面上没有线条的概念。您可以检查窗口中任何元素的x和y位置，然后确定该位置是否符合您对同一行“”的任何标准

默认情况下，div是窗口的全宽，因此此HTML中容器内的两个div：

<div id="container">
    <div class="first"></div>
    <div class="second"></div>
</div>

将是一个在另一个之上，除非有一些您尚未公开的其他CSS控制布局以允许它们位于同一行中。如果它们确实是

width:auto

，并且没有任何其他影响这一点的布局规则，那么它们都将是全宽的，因此

第一个

将位于布局流中的

第二个

之上。根据该短语的任何典型定义，他们永远不会“站在同一条线上”

您可以在这里随意试用：将右窗格的大小调整为您想要的任何宽度。在所有情况下，

第一个

将位于

第二个

之上

---

---

另一方面，如果允许

div

元素具有不同类型的布局，例如让它们成为

display:inline block

，并为它们定义一个宽度，那么布局引擎将在给定的行上容纳尽可能多的元素，如下所示：

有些事情告诉我display:flex可能在这方面有所帮助。阅读了解更多信息。

“在同一行上”需要具有完全相同高度的内联元素或浮动块元素。默认情况下，div是块元素。因此，要么使用

标记而不是

，要么添加

显示：内联块到那些div的CSS规则

编辑问题后添加：

width:auto
对于
表示父元素的100%（在本例中为全宽度）。正如我写的：如果你有块，使用
display:inline块在他们的CSS中。如果希望它们具有相同的高度，请将它们放入一个公共容器DIV（您已经有了）中，并应用以下CSS：

#container {
  display: table;
}
.first, .second {
  display: table-cell;
  width: 50%;
}

Aha（已编辑的问题），Javascript：好的，读取DIV宽度，添加它们并将结果与（读取的）容器宽度进行比较。
您可以使用元素边界框并检查重叠：

var rect1 = $('.first')[0].getBoundingClientRect();
var rect2 = $('.second')[0].getBoundingClientRect();
var overlaps = rect1.top <= rect2.bottom && rect2.top <= rect1.bottom;

var rect1=$（'.first'）[0].getBoundingClientRect（）；
var rect2=$（'.second'）[0].getBoundingClientRect（）；
var overlaps=rect1.top您需要询问更多细节。请尝试阅读此感谢@AliSeyfi，问题已更新！我不知道具体的答案，但请看一看。使用此选项，您应该能够为div和compare判断父容器的垂直位置偏移。如果是相同的，则它们位于同一行。是的，我知道这一点，并且它们已经使用
display:inline block，很抱歉，我从一开始就没有在我的问题上提到这一点。。。。我不是在问：“我怎样才能让他们在同一排”，我是在问：我怎样才能知道他们是否在同一排？使用javascript。。。再次为不清楚而抱歉！
var rect1 = $('.first')[0].getBoundingClientRect();
var rect2 = $('.second')[0].getBoundingClientRect();
var overlaps = rect1.top <= rect2.bottom && rect2.top <= rect1.bottom;