检测div何时溢出

Question

我正在尝试让我的网站根据屏幕的大小而流动。我创建了这个：http://jsfiddle.net/aboveyou00/7NeZz/1/。它工作得足够好了。内部的两个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的解决方案是首选的，但不是我们所期望的。

我该怎么做呢？

Answer 1

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

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

http://jsfiddle.net/ExplosionPIlls/7NeZz/2/

如果你不知道宽度或者有更复杂的东西在进行，你可以在调整大小时将两个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');

http://jsfiddle.net/ExplosionPIlls/7NeZz/3/