如何水平对齐文本和图像？

Question

我有标题、副标题和图像。副标题应直接位于标题下方，左对齐并占屏幕宽度的 75%。然后图像应占据剩余的 25%，并与标题位于同一“行”/水平面上。

小提琴演示

我认为问题在于标题/副标题在 display:block; 中，但是当我将其更改为 display:inline; 副标题跳转到与图像对应的行，标题留在两者上方.我不想要这个。我希望副标题保留在标题下方，并且将标题/副标题一起视为图像放置在其右侧的一个块。理想情况下，它看起来就像现在图像向上移动一样。

如何更改 CSS 以获得以下结果？

在此先感谢您的帮助！

（另外，为什么不简单地将标题显示从 block 更改为 inline 解决问题？我明白 block inline 一整行 --- 删除之前/之后的换行符。我希望 inline 删除现在的换行符，同时保留标题的副标题，因为它们在同一个 <div> ，但这不会发生）

原文由 Jonathan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这是因为 div 是一个块元素，它将占用整个屏幕宽度，如果您需要它内联并调整屏幕，请使用 css float:left 用于包含标题和图像的 div

 #header-titles{
  width:65%;
  margin-left:10%;
  text-align: left;
  float: left;
}
#header-image{
  width:20%;
  margin-right:5%;
  text-align:right;
  float: left;
}

这是您的工作示例：http: //jsfiddle.net/q9g2fj7d/34/

原文由 Sethuraman 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

这是一个 flex 的小练习）

 .wrapper {
  display: flex;
  flex-flow: row wrap;
}

.main {
  text-align: left;
  background: deepskyblue;
  width:70%;
}

.aside-1 {
background-image:url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQmug35W66IxVvu52OPl9Tz8TxoIOCD6hjxJbw6cOZIjjd_K5Mb');

  background: purple;
   width:20%;
}
.aside-1 img{
  width:100%;
}

@media all and (min-width: 600px) {
      .aside { flex: 1; }
    }

/*@media all and (min-width: 800px) {
  .main    { flex: 3 0px; }
  .main    { order: 1; }
  .aside-1 { order: 2; }

}*/

 <div class="wrapper">
  <article class="main">
    <h2 class="title-bar" id="tip-title">
                        The Title That is Here
                    </h2>
                    <i>I'm a subheading!</i>
  </article>
  <aside class="aside aside-1"></aside>
</div>

原文由 katty azabache 发布，翻译遵循 CC BY-SA 4.0 许可协议