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

Question

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

Fiddle demo

我认为问题在于标题/副标题位于display:block;中，但是当我将其更改为display:inline;时，副标题会跳到其与图像所在的行，并且标题都位于上方。我不想这样。我希望字幕保持在标题下方，并且标题/字幕一起应被视为图像放置在其右侧的一个块。理想情况下，图像看起来像现在一样。

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

在此先感谢您的帮助！

（还有为什么不简单地将标题显示从block更改为inline的问题？我知道block占据了整行，而inline删除之前/之后的换行符。我希望inline删除现在存在的换行符，同时保留字幕和标题，因为它们位于同一<div>中，但这不会发生）

Answer 1

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

#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/

Answer 2

将此代码直接添加到您的图像中，或者给它一个类并在CSS中设置样式：

.imageclass {

position: relative;
top: -5em;

}

Answer 3

这里是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>