W3School TIY Editor
W3School 在线教程
改变方向
暗黑模式
运行代码
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * { box-sizing: border-box; } .row { display: flex; } /* 创建三个并排且宽度相等的列 */ .column { flex: 33.33%; padding: 5px; } </style> </head> <body> <h2>并排的图像</h2> <p>如何使用 CSS Flexbox 创建并排图像：</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>