2

我试图让我的网站根据屏幕的大小流动。我创建了这个：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 的解决方案是首选，但不是预期的。

我该怎么做呢？

4

1 回答 1

2

不完全确定我理解你的问题，但如果上面没有内容并且宽度是固定的，当容器变得太小时，你可以使用一个相当简单的媒体查询来更改第二个 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/

于 2013-05-29T22:03:12.473 回答