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

Question

我正在尝试编写博客，以获取有关php和html的经验。 我在一个网站上列出了一个特殊类别的所有帖子，它们的数量可能有所不同。

有一个标题，一个副标题和一个div“ fakeimg”（它用作我还没有得到的图片的占位符），我希望该副标题位于标题下方，并且fakeimg在它们旁边，顶部它的侧面应与标题相同。

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

我已经尝试了很多在互联网上找到的东西，以使它们像我希望的那样对齐，但是以某种方式，我没有设法使它与display一起使用：flex或block例如

这是fakeimg的css，div应该包含标题，子标题和fakeimg，并且div也仅包含标题和子标题。

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

这也是页面本身的代码

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

通过编辑，fakeimg从标题的相同高度开始，这正是我想要的。 仍然存在的问题是，fakeimg都应该位于正确的位置，并且具有相同的水平位置，现在它紧邻子标题。

我是新手，因此感谢您提供的任何帮助。

Answer 1

您必须使用单独的div。 一个用于标题和副标题，另一个用于图像。 然后以某种方式指定两者的宽度，以使它们的总和为100％。 将它们浮动到左侧，以便彼此相邻。 我已经调整了您的代码。

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

我能够使用flex做到这一点。 我已经将标题和副标题包装在div中，并将display：flex添加到.title-and-subheading-onecat 。 希望这对您有帮助。 谢谢

 .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

您可以使用引导程序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>

希望这可以帮助。

Answer 4

将所有元素（图像，标题和副标题）的显示更改为inline-block 。 如果这样不起作用，您可以尝试将其更改为table 。 几乎一样，它应该给您想要的结果

Answer 5

在这种情况下，请使用此简单代码。

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>

希望你喜欢这个。