W3School TIY Editor
W3School 在线教程
改变方向
暗黑模式
运行代码
<!DOCTYPE html> <html> <head> <style> * { box-sizing: border-box; } .column { float: left; width: 33.33%; padding: 5px; } /* 清除浮动 */ .row::after { content: ""; clear: both; display: table; } /* 响应式布局 - 使三个列上下堆叠，而不是并排显示 */ @media screen and (max-width: 500px) { .column { width: 100%; } } </style> </head> <body> <h2>响应式“并排”图像</h2> <p>如何使用 CSS 的 float 属性创建并排图像。在屏幕宽度为 500px 或更小时，图像将上下堆叠，而不是并排显示：</p> <p>调整浏览器窗口大小可查看效果。</p> <div class="row"> <div class="column"> <img src="/i/photo/beijing.jpg" alt="Beijing" style="width:100%"> </div> <div class="column"> <img src="/i/photo/hangzhou.jpg" alt="Hangzhou" style="width:100%"> </div> <div class="column"> <img src="/i/photo/chongqing.jpg" alt="Chongqing" style="width:100%"> </div> </div> </body> </html>