css - 在左侧创建文本 block 并在右侧创建图像的最佳方法？

Question

我想创建一个分区，左边是文本，右边是图片。 div 的高度约为 300px。我正在尝试不同的方式，但更愿意遵循这种格式的标准。谢谢。

HTML

<div id="early">
    <h3> Napoleon's Origins </h3>
    <br>
    <br>
    <p>Napoleon Bonaparte was born in his family's ancestral home on August 15, 1769.</p>   
</div>

CSS

#early {
    margin-right: 250px;
    height: 250px;
    background: url(../images/Napoleon_23yrs.jpg);
    background-repeat: no-repeat;
    background-position: right;
    background-size: 160px 225px;
    line-height: 3px;
}

Answer 1

创建一个 div 并将 display:inline-block 应用于段落标记。下面的图片将自动对齐到文本的右侧。

Demo

---

HTML:

<div class="content">
<p>Napoleon Bonaparte was born in his family's ancestral home on August 15, 1769.</p>
<img src="DD1_mini.jpg"></img>

CSS:

.content {height:300px; width:auto; }
.content p {display:inline-block; vertical-align:top;}