Jump to content

Multi columns with full height images


ZL77
 Share

Recommended Posts

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

  • 4 weeks later...

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...