css - 如何控制响应流

Question

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

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

Answer 1

使用 CSS媒体查询。首先，将 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