ZL77
-
Posts
2 -
Joined
-
Last visited
ZL77's Achievements
Newbie (1/7)
0
Reputation
-
ZL77 joined the community
-
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>
-
Need to create a layout that the content area is fixed height and scroll vertically, automatically create multi columns base on text length, then have some full height images after text. But can't figure out how to clear the float on text columns, is there any way to do that with CSS only? html here <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>columns</title> <style> .main { height: 300px; display: flex; overflow-x: auto; overflow-y: hidden; } .post { display: flex; } .post-text { column-width: 150px; } h1 { width: 150px; } .post-gallery { display: flex; margin-left:10px; } img { display: block; height: 300px; width: 600px; background-color: #ccc; margin-right: 10px; } </style> </head> <body> <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. Voluptates dignissimos illum ipsa at temporibus excepturi, aperiam amet earum illo, sapiente voluptatibus asperiores soluta labore saepe quibusdam rem cupiditate dolorum id? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tempore aut nobis perferendis praesentium? Rem debitis officiis eaque, mollitia iusto voluptatum nihil at laboriosam! Consectetur accusamus autem maiores architecto odio! </p> </div> <div class="post-gallery"> <img src="#"> <img src="#"> </div> </div> </div> </body> </html>