如何控制响应流

Posted 2023-03-06

【中文标题】如何控制响应流

【英文标题】：How to control responsive flow

【发布时间】：2012-11-12 04:57:44

【问题描述】：

我正在制作一个响应式网站，并且在正文的右上角有一个标注样式框。当窗口较窄时，我希望标注显示在主文本下方，而不是上方。

这是一个代码示例：http://codepen.io/creativetags/full/ydozx

【问题讨论】：

将 side-col div 移动到标记中的 main-col div 下方。不过，您必须调整 CSS 以使其位于普通视图的左上角。

普通视图下绝对定位覆盖主列：codepen.io/creativetags/pen/Fqitw

【参考方案1】：

使用 css media queries。 首先，将 main-col 移到 side-col 上方。然后你的 .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

【讨论】：

如果侧边栏是全高列但它是标注样式框，这可能会起作用。还是谢谢。

嗯，除非我遗漏了一些我看不出有什么不同的东西？根据此处的代码：codepen.io/creativetags/full/ydozx 我的答案应该有效。你试过了吗？

最小化您的浏览器屏幕并看到它移动到底部codepen.io/creativetags/full/Fqitw 如果我遗漏了什么，请告诉我。

这是我的代码版本：codepen.io/creativetags/pen/DBIFi side-col 不再像原来在宽视图中那样被 main-col 包裹。

我不是该技术的忠实拥护者，但如果让它们包裹起来更重要的话..codepen.io/anon/pen/KlmIF