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; } </style> </head> <body> <h2>并排的图像</h2> <p>如何使用 CSS 的 float 属性创建并排图像：</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>