如何在图像旁边对齐标题和副标题？

Question

I'm trying to code a blog to get experience with php & html. I have a site where I list all posts from one special category, the number of them can vary.

There is a title, a subheading and a div "fakeimg" (that works as a placeholder for the pictures I haven't got yet) and I want the subheading to be underneath the title and the fakeimg to be next to them, the top side of it should be at the same height as the title is.

                             _________
title, mostly a short one   |         |   
                            | fakeimg |
the subheading, one row or  |         |
maybe two                   |_________| 

________a hr between the posts_________
                             _________
title, mostly a short one   |         |   
                            | fakeimg |
the subheading, one row or  |         |
maybe two                   |_________| 

I've tried many things I've found on the internet to get them aligned like I want them to be, but somehow I didn't manage to get it work with either display: flex nor block for eg

here is the css for the fakeimg, the div that should contain title, subheading and fakeimg and also the divs for only the title and only the subheading.

.fakeimg {
  width: 100px 100px;
  padding: 3em 2em;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-right: 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 also the code of the page itself

<?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;?>

With the editing the fakeimg start at the same height of the title, which is what I wanted. Still a problem is that the fakeimg's should all be on the right site and have the same horizontal postition, right now it's directly next to the subheading.

I appreciate any help I get since I'm a newbie.

Answer 1

You have to use separate div. One for the title and subtitle and another for the image. Then specify width of both in a way so that they add up to 100%. float both of them to left so that they are beside each other. I have tweaked your code.

CSS

.img-parent {
  width: 50%;
  float: left;
}
.fakeimg {
  width: 100px 100px;
  padding: 3em 2em;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-right: 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);
  position: relative;
  display: block;
}

 .title-and-subheading-onecat{
  margin-right: 1.5em;
  display: block;
  align-items: start;
}

.one-post  {
  width: 50%;
  float:left;
}

.post-description {
  float: left;
  margin-bottom: auto;
}

HTML:

  <div class="title-and-subheading-onecat">
    <div class="one-post">
      <div class="title">
        <a href="http://localhost:8888/blog/public/index.php/post?id=1">
          asdasd asd asd asd asd asd asd
        </a>
      </div>
      <div class="post-description">
        asdasdasd asd asd ad as dasd asdas das asd asdas dasd asd asda das dasd asds
      </div>
    </div>
    <div class="img-parent">
      <div class="fakeimg">
        Image
      </div>
    </div>
  </div>

JSFiddle: https://jsfiddle.net/ashhaq12345/Lgsa0r6f/

Answer 2

I was able to do it using flex. i have wrapped the title and sub title in a div and added display:flex to .title-and-subheading-onecat . Hope this helps you. thanks

 .fakeimg { width: 100px 100px; padding: 3em 2em; /* margin-top: 0.5em; margin-bottom: 0.5em; margin-right: 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); display: block; } .title-and-subheading-onecat{ margin-right: 1.5em; /* display: block; */ display:flex; align-items: start; } .one-post { clear: both; margin: 0; } .post-description { margin-bottom: auto; } 

 <div class="title-and-subheading-onecat "> <div class=""> <div class="one-post"> <a href=""> TITLE HERE </a> <br /> </div> <div class="post-description"> TITLE HERE </div> </div> <div class="fakeimg"> Image </div> </div> 

Answer 3

You can easily do this using bootstrap 3/4.

<div class="media">
    <div class="media-body">
      <h4 class="media-heading">Heading</h4>
      <p>Sub Heading/ Description</p>
    </div>
    <div class="media-right">
      <img src="img_avatar1.png" class="media-object" style="width:60px">
    </div>
 </div>

Hope this helps.

Answer 4

Change the display for all the elements (image, title and subheading) to inline-block . If that doesn't work you can try changing them to table . Very much the same and it should give you the result you are looking for

Answer 5

In that case use this simple code.

CSS

div {
  border: 3px solid #4CAF50;
  padding: 5px;
}  
.clearfix {
  overflow: auto;
}
h1{
  margin:0;
}   
.img2 {
  float: right;
}

HTML

<div class="clearfix">
  <img class="img2" src="x.jpg" width="170" height="170">
  <h1>Header</h1>
  <p>SubHeader/Description</p>
</div>

Hope you like this one.