javascript - 检测 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/