I am currently working on developing a blog using php and html to enhance my coding skills. On my website, I have a special category where I display posts, the number of which can vary.
Each post is composed of a title, a subheading, and a placeholder div called "fakeimg" for images that are not yet available. I want the subheading to appear below the title with the fakeimg positioned next to them at the same height as the title.
_________
title, usually short | |
| fakeimg |
subheading, one or two rows| |
|_________|
---------hr between posts---------
_________
title, usually short | |
| fakeimg |
subheading, one or two rows| |
|_________|
I have tried various solutions found online to align them as desired using properties like display: flex and block, but haven't been successful.
Below is the CSS code for the fakeimg, the container div for title, subheading, and fakeimg, as well as separate divs for only the title and only the subheading.
.fakeimg {
width: 100px;
height: 100px;
padding: 3em 2em;
margin: 0.5em;
background-color: lightgrey;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
float: right;
display: block;
}
.title-and-subheading-onecat{
margin-right: 1.5em;
display: flex;
align-items: start;
}
.one-post {
clear: both;
margin: 0;
}
.post-description {
margin-bottom: auto;
}
Here is an excerpt of the page's code:
<?php foreach($post as $p):?>
<div class="title-and-subheading-onecat">
<div class="one-post">
<a href="http://localhost:8888/blog/public/index.php/post?id=<?php echo e($p->id); ?>">
<?php echo (e($p['title'])); ?>
</a>
<br />
</div>
<div class="post-description">
<?php echo nl2br(e($p['subheading']));?>
</div>
<div class="fakeimg">
Image
</div>
</div>
<?php endforeach;?>
The fakeimg now starts at the same height as the title, as intended. However, all fakeimgs need to be aligned on the right side with consistent horizontal positioning, instead of being directly next to the subheading.
I would greatly appreciate any assistance from experienced developers as I am still learning the ropes in coding.