Question

假设我在响应式设计上有2个元素：

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

两个风格都包含：

width: auto;
display: inline-block;
float: left;

因为我期望不同的屏幕尺寸来查看页面，所以，根据屏幕尺寸，有时它们将被渲染/显示在同一行上，有时它们不会！，第二个DIV将被移动到另一行。

所以，我想知道，如何判断它们是否与JavaScript在同一行？

谢谢

Answer 1

您可以使用元素边界框并检查重叠：

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

这将检查任何可能足以供您使用的重叠。我使用jQuery来获取元素，但你可以以相同的方式使用纯js，它会更加冗长。

Answer 2

页面上没有线条概念。您可以检查窗口中任何元素的x和y位置，然后确定它是否符合＆＃34;在同一行＆＃34; 上的任何条件。

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

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

将是一个在另一个之上，除非有一些你没有透露的其他CSS控制布局以允许它们在同一行。如果它们确实width: auto并且没有任何其他布局规则影响这一点，那么它们将是全宽度，因此布局流中first将高于second。他们永远不会在同一条线上＃34;通过该短语的任何典型定义。

您可以在此处尝试：https://jsfiddle.net/jfriend00/y0k7hLr8/，将右侧窗格调整为您想要的任何宽度。在所有情况下，first都将保留在second。

之上

另一方面，如果允许div元素具有不同类型的布局（例如让它们为display: inline-block并为它们定义宽度），那么布局引擎将适合尽可能多地在给定的行上：https://jsfiddle.net/jfriend00/229rs97p/

Answer 3

有些东西告诉我显示：flex可能会帮助你。请阅读https://css-tricks.com/snippets/css/a-guide-to-flexbox/了解详情。

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

3 个答案: