Jump to content

Multi text columns with full height images


ZL77
 Share

Recommended Posts

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

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...