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/

检测div何时溢出

1 个答案: