ZL77
-
Posts
2 -
Joined
-
Last visited
Content Type
Profiles
Forums
Events
Posts posted by ZL77
-
-
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>
Multi text columns with full height images
in CSS
Posted
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.