如何水平對齊文本和圖像？

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>