ZL77 Posted August 14, 2020 Share Posted August 14, 2020 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> Link to comment Share on other sites More sharing options...
shaili_shah Posted September 11, 2020 Share Posted September 11, 2020 Hello Good Morning. There is a column-fill attribute in css which will fill the column in same manner. I have written the code on please refer this : https://jsfiddle.net/d36n2ov1/1/ Hope you like it and understand it. Thanks! 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