Question

我有一个响应式网站设计我正在研究，我需要弄清楚如何根据媒体查询使三个div崩溃。这就是我要做的事情：

屏幕尺寸1000px或更大：三个div在同一行的页面上居中，左边div（rotatorLeft）为25％，中间div（CenterRotator）为50％，右边div（rotatorRight）为25％。

屏幕尺寸小于1000像素：三个div仍然居中，但我希望左右div（rotatorLeft＆amp; rotatorRight）下降到中间div之下。

我遇到的问题是弄清楚如何让div1换行到下一行。我能想到实现这一目标的唯一方法是编写一些jQuery脚本来改变实际html中div元素的顺序，但我宁愿不这样做。

这是我的html：

<div id="rotators">
<div id="rotatorLeft">
<img class="RotatorImage" src="/images/Showcase.png">
</div>
<div id="CenterRotator">
<img class="RotatorImage" src="/images/MainRotator.png">
</div>
<div id="rotatorRight">
<img class="RotatorImage" src="/images/DYK.png">
</div>
</div>

和CSS：

#rotators {
width: 100%;
margin: 10px auto;
height: 390px;
max-width:1320px;
}

#rotatorLeft {
width: 25%;
float: left;
}

#CenterRotator {
width: 50%;
float: left;
}

#rotatorRight {
width: 25%;
float: left;
}

.RotatorImage {
width: 100%;
}

有什么建议吗？

Answer 1

这可能难以实现，因为不同的布局意味着文档中的元素顺序不同。如果你想改变你的设计以显示左边的主（50％）div，那将非常简单：

<div id="rotators">
    <div id="CenterRotator"></div>
    <div id="rotatorLeft"></div>
    <div id="rotatorRight"></div>
</div>

#rotators {margin: 10px auto; }
#rotators > div {height: 200px; float: left; }

#rotatorLeft {width: 25%; background: #eee;  }
#CenterRotator {width: 50%; background: #ddd; }
#rotatorRight {width: 25%; background: #ccc; }

@media only screen and (max-width: 1000px) {
    #rotators > div {float: none; width: 100%; }
}

如果你与设计完全结合，那么如果你有一个固定的高度并使用绝对定位，你就可以实现它。

#rotators {margin: 10px auto; position: relative; }
#rotators > div {height: 200px; position: absolute; top: 0; }

#CenterRotator {width: 50%; left: 25%; background: #ddd; }
#rotatorLeft {width: 25%; left: 0; background: #eee;  }
#rotatorRight {width: 25%; left: 75%; background: #ccc; }

@media only screen and (max-width: 1000px) {
    #rotators > div {position: static; width: 100%; }
}

响应的div崩溃

1 个答案: