W3School TIY Editor
W3School 在线教程
改变方向
暗黑模式
运行代码
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .float-right-sm { background-color: yellow; } .float-right-lg { background-color: pink; } @media (max-width: 768px) { .float-right-sm { float: right; } } @media (min-width: 769px) { .float-right-lg { float: right; } } .clearfix::after { display: block; clear: both; content: ""; } </style> </head> <body> <h1>响应式浮动</h1> <p>float-right-sm 类将在宽度等于或小于 768px 的屏幕上向右浮动。float-right-lg 类将在宽度等于或大于 769px 的屏幕上向右浮动。请注意，我们还使用清除浮动来清除浮动。</p> <p>调整浏览器窗口大小可查看结果。</p> <div class="clearfix"> <span class="float-right-sm">小于 768px 时向右浮动</span><br> <span class="float-right-lg">大于等于 769px 时向右浮动</span><br> </div> </body> </html>