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

【问题标题】：How can I align a title and subheading next to an image?如何在图像旁边对齐标题和副标题？
【发布时间】：2019-01-07 20:30:17
【问题描述】：

我正在尝试编写博客以获取 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                   |_________|

我已经尝试了很多我在互联网上找到的东西来让它们像我想要的那样对齐，但不知何故我没有设法让它与任何一个显示一起工作：例如 flex 或 block

这是 fakeimg 的 css，应该包含标题、副标题和 fakeimg 的 div，以及只有标题和只有副标题的 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 应该都在正确的站点上并且具有相同的水平位置，现在它直接在副标题旁边。

感谢我作为新手得到的任何帮助。

【问题讨论】：

标签： html css text-align

【解决方案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/

【讨论】：

这对我帮助很大，谢谢！只是想知道，如果我想把标题和副标题放在中间会更容易吗？
中心是什么意思？只有2个元素并排。所以标题和副标题都在左 div 或右 div 上。在这两种情况下，代码都是相同的
我的意思是两个文本的高度，它们在图片的中间

【解决方案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>

【讨论】：

我试着这样做，但现在 fakeimg 相互重叠，float: right 也无法解决这个问题

【解决方案3】：

您可以使用 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>

希望这会有所帮助。

【讨论】：

感谢您的解决方案，但我更喜欢没有引导程序的解决方案。 :)
在这种情况下检查我的新答案

【解决方案4】：

将所有元素（图像、标题和副标题）的显示更改为inline-block。如果这不起作用，您可以尝试将它们更改为table。非常相似，它应该会给你你正在寻找的结果

【讨论】：

【解决方案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>

希望你喜欢这个。

【讨论】：