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

Question

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

小提琴演示

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

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

在此先感谢您的帮助！

（还有为什么不简单地将标题的显示从block更改为inline解决问题？我知道block占据了一整行，而inline联会在之前/之后删除换行符。我希望inline删除那里的换行符现在保留带有标题的副标题，因为它们在同一个<div> ，但这不会发生）

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/

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>