Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <style>
- * {
- box-sizing: border-box;
- }
- .column {
- float: left;
- width: 33.33%;
- padding: 0px;
- }
- /* Clearfix (clear floats) */
- .row::after {
- content: "";
- clear: both;
- display: table;
- }
- /* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
- @media screen and (max-width: 500px) {
- .column {
- width: 100%;
- }
- }
- </style>
- </head>
- <body>
- <h2>Responsive "Side-by-Side" Images</h2>
- <p>How to create side-by-side images with the CSS float property. On screens that are 500px wide or less, the images will stack on top of each other instead of next to each other:</p>
- <p>Resize the browser window to see the effect.</p>
- <div class="row">
- <div class="column">
- <img src="https://www.w3schools.com/howto/img_snow.jpg" alt="Snow" style="width:100%">
- </div>
- <div class="column">
- <img src="https://www.w3schools.com/howto/img_forest.jpg" alt="Forest" style="width:100%">
- </div>
- <div class="column">
- <img src="https://www.w3schools.com/howto/img_forest.jpg" alt="Mountains" style="width:100%">
- </div>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement