html - 将 img 放在左边，将 h1 放在右边

Question

我正在学习 CSS 和 HTML，我正在尝试制作一个外观简单的投资组合页面。这就是我想要的样子:

左边图片右边文字的HTML代码:

<h1 id="appTitle">Beautiful Voice Recorder<br /><p id="appDescription">The simplest and best looking voice<br /> recorder you'll find on Google Play.</p></h1>
<img src="imgs/voice_recorder.png" alt="slider" id="appImg" />

CSS 样式:

#appImg{
    float: left;
    margin-left: 100px;
}
#appTitle{
    font-size: 60px;
    float: right;
    margin-right: 100px;
}

它是这样的:

一切都搞砸了，我只是无法让它工作，因为我是一个初学者。你能告诉我如何实现这一目标吗？谢谢!

Answer 1

将 img 移动到 float 元素的顶部。

像这样:

<img src="imgs/voice_recorder.png" alt="slider" id="appImg" />
<h1 id="appTitle">Beautiful Voice Recorder<br /><p id="appDescription">The simplest and best looking voice<br /> recorder you'll find on Google Play.</p></h1>

float 将内容从正常布局中分离出来，并随着下面的内容折叠。