将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移至浮动项目的顶部。

像这样：

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

Floats将内容从正常布局中分离出来并与下面的内容一起折叠。

Answer 2

你会介意使用像这样的表吗？

<table>
  <tr>
    <td><img align="left" src="http://upload.wikimedia.org/wikipedia/en/3/38/Nihongo_Bunpou.100x400.png" alt="slider" id="appImg" /></td>
    <td style="padding-left: 50px;"><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></td>
  </tr>
</table>

与您的图像和文字类似的示例

http://jsfiddle.net/ZQee5/

表格也适用于在页面中的不同对象中放置更多元素。这是一个解决方案，如果它适合你。

---

解决方案＃2

Althoguh你可以使用表格，但是没有预先作为 HTML布局，我已经为你使用了正确的 DIV 元素和 CSS 。

<div id="column-content">
    <img src="http://shrani.si/f/q/1A/4T8mfuFC/nihongobunpou100x400.png" alt="slider" id="appImg" />
    <span><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></span>
</div>

在这里查看整个代码和CSS： http://jsfiddle.net/ZQee5/2/