我正在制作一个响应式网站,将一个标注样式的框浮动到主文本的右上方。当窗口变窄时,我希望该标注框完整地显示在主文本下方,而不是上方。
以下是代码示例:http://codepen.io/creativetags/full/ydozx
以下是代码示例:http://codepen.io/creativetags/full/ydozx
使用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