如何创建:响应式浮动

学习如何使用 CSS 创建响应式浮动元素。

响应式浮动

使用媒体查询并设置特定的屏幕宽度(以像素为单位)来确定元素何时应该浮动:

/* 在宽度等于或小于 768px 的屏幕上向右浮动 */
@media (max-width: 768px) {
  .float-right-sm {
    float: right;
  }
}

/* 在宽度等于或大于 769 像素的屏幕上向右浮动 */
@media (min-width: 769px) {
  .float-right-lg {
    float: right;
  }
}

亲自试一试

相关页面

教程:CSS 浮动