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

Question

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

Fiddle demo

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

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

预先感谢您的帮助!

(为什么不简单地将标题的显示从 block 更改为 inline 解决问题？我理解 block 占据一整行，而 inline 删除之前/之后的换行符。我会期望 inline 删除现在存在的换行符，同时保留副标题和标题，因为它们位于相同的 <div> 中，但这不会发生)

Answer 1

这是因为 div 是一个 block 元素，它将占据屏幕的整个宽度，如果您需要它内联并调整屏幕，请对包含标题和图像的 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/