如何控制响应式布局？

Question

我正在制作一个响应式网站，将一个标注样式的框浮动到主文本的右上方。当窗口变窄时，我希望该标注框完整地显示在主文本下方，而不是上方。

以下是代码示例：http://codepen.io/creativetags/full/ydozx

- Mark Robinson

---

将侧边栏div移动到标记中的主要列div下方。但是，您需要调整CSS以使其在正常视图中定位在左上角。 - sachleen

绝对定位在正常视图下覆盖了主列：http://codepen.io/creativetags/pen/Fqitw - Mark Robinson

Answer 1

使用CSS 媒体查询。首先，将主列移到侧列上方。然后在您的.css文件中，这将使您拥有控制权。

@media only screen and (max-width: 360px) {
.main-col {
float: none;
width: 100%;
}

.side-col {
float: none;
width: 100%;
background-color: silver;
}

这将应用于屏幕尺寸为360像素或以下的CSS。

@media only screen and (min-width: 360px) {
.main-col {
float: left;
width: 83%;
}

.side-col {
float: left;
width: 17%;
background-color: silver;
}

这将适用于屏幕尺寸大于360像素。

如果必须换行文本，则可以尝试使用此方法：http://codepen.io/anon/pen/KlmIF

- A Smith

---

如果侧边栏是一个全高度的列，那么这可能有效，但它是一个突出显示样式的框。无论如何，谢谢。 - Mark Robinson

嗯，除非我漏看了什么，否则我不明白那会有什么区别？根据这里的代码：http://codepen.io/creativetags/full/ydozx 我的答案应该是正确的。你试过了吗？ - A Smith

将浏览器屏幕最小化并查看它移动到底部 http://codepen.io/creativetags/full/Fqitw 如果我漏掉了什么，请告诉我。 - A Smith

这是我对你代码的版本：http://codepen.io/creativetags/pen/DBIFi。在宽屏视图中，side-col不再像原始代码一样被main-col包裹。 - Mark Robinson

我不是这种技术的忠实粉丝，但如果让它们包装起来更重要的话，那就这样吧。http://codepen.io/anon/pen/KlmIF - A Smith

我没有想过这样做。虽然不太规范，但是能用，谢谢。 - Mark Robinson