Javascript 检测div何时溢出

我试图让我的网站流量取决于屏幕的大小。我创建了这个：。它工作得很好。当两个内侧div合适时，它们在同一条线上居中并彼此相邻，但如果不合适，则在各自的线上居中

这是HTML。CSS和JavaScript处于混乱状态

<div class="divContainer">
  <div class="div1">
    <img src="http://placehold.it/200x300/EEEEEE/000000" />
  </div>
  <div class="div2"></div>
</div>

问题是，现在我试图弄清楚如何根据是否将

div2

推到下一行来更改格式。如果在同一行上，则内部文本应向左对齐。如果移动到底部，则内部文本应居中对齐

约束：如果需要，我可以使用javascript和jQuery。首选仅使用CSS的解决方案，但不是预期的

---

如何做到这一点？

我不完全确定我是否理解您的问题，但是如果上面没有内容，并且宽度是固定的，那么当容器变得太小时，您可以使用一个相当简单的媒体查询来更改第二个div的样式

@media all and (max-width: 520px) {
    div.div2 {
        text-align: center;
    }
}

如果您不知道宽度，或者有更复杂的事情发生，您可以在调整大小时将两个div的组合宽度与容器进行比较

$(window).on('resize', function () {
    if ($(".div1").width() + $(".div2").width() > $(".divContainer").width()) {
        $(".div2").css('text-align', 'center');
    }
    else {
        $(".div2").css('text-align', 'left');
    }
});

$(window).trigger('resize');

---

您是否尝试过在CSS3中使用媒体查询来确定窗口大小何时变小？或者使用jquery，您可以执行以下操作same@aboveyou00刚刚更新了我的答案，提供了一个可能的非固定解决方案。你能推荐一个参考来理解

@media all and（max width:520px）{

行吗？

and（max width:520px）

语法对我来说是一个新的语法。