ZL77 Posted August 15, 2020 Share Posted August 15, 2020 I am creating a layout which is scrolling vertically, the text area will auto set multi columns base on the length of copy, then follow with some images. But seems there is sort of float on the multi column, the images craps into second text column, is there any way to fix this? thanks. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Text columns with images</title> <style> .wrapper { display: grid; grid-template-columns: 300px 1fr; height: 300px; } .nav { background-color: #333; } .main { display: flex; overflow-x: auto; } .post { display: flex; background-color: #eee; margin-left: 10px; } .post-text { column-width: 200px; } .post-text h1 { width: 200px; } .post-gallery { display: flex; margin-left: 10px; } img { background-color: #ccc; margin-left: 10px; } </style> </head> <body> <div class="wrapper"> <div class="nav"> navigation </div> <div class="main"> <div class="post"> <div class="post-text"> <h1 class="post-title"> post title </h1> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique fugit praesentium ullam perspiciatis adipisci molestias? Repellat ipsa molestiae libero, illo quia fuga pariatur commodi nisi minus voluptatum fugiat ex. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, veniam iste. Tempora laboriosam at aliquid debitis similique iusto, facere omnis eos odio explicabo tempore autem nemo veniam voluptates mollitia? Velit.</p> </div> <div class="post-gallery"> <img src="#" width="300px"> <img src="#" width="400px"> <img src="#" width="200px"> </div> </div> <div class="post"> <div class="post-text"> <h1 class="post-title"> post title </h1> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique fugit praesentium ullam perspiciatis adipisci molestias? Repellat ipsa molestiae libero, illo quia fuga pariatur commodi nisi minus voluptatum fugiat ex. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, veniam iste. Tempora laboriosam at aliquid debitis similique iusto, facere omnis eos odio explicabo tempore autem nemo veniam voluptates mollitia? Velit.</p> </div> <div class="post-gallery"> <img src="#" width="300px"> <img src="#" width="400px"> <img src="#" width="200px"> </div> </div> </div> </div> </body> </html> Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now