html - 如何使文本列保持在右侧 保持在右侧

Question

将文本保留在该列右侧的最简单方法是什么？我将桃子的图像 float 在左侧，但是当右侧的文本超出桃子的图像时，它的位置就会低于桃子。

如何将文本的位置保持在右侧而不是放在左栏中？

这是我的 jsfiddle:http://jsfiddle.net/huskydawgs/7esyct27/

<div class="alignleft">
    <p>
        <img alt="Peach" src="http://www.frankfarms.com/images/Peach.png" />
    </p>
    <p><strong>Peach</strong>
        <br />Calories 59
        <br>Total Fat 0.4 g
        <br>Sodium 0 mg</p>
</div>
<p>The peach (Prunus persica) is a deciduous tree, native to Northwest China, in the region between the Tarim Basin and the north slopes of the Kunlun Shan mountains, where it was first domesticated and cultivated.[2] It bears an edible juicy fruit also called a peach. The species name persica refers to its widespread cultivation in Persia, whence it was transplanted to Europe. It belongs to the genus Prunus which includes the cherry and plum, in the family Rosaceae. The peach is classified with the almond in the subgenus Amygdalus, distinguished from the other subgenera by the corrugated seed shell.</p>
<p>Peaches and nectarines are the same species, even though they are regarded commercially as different fruits. In contrast to peaches, whose fruits present the characteristic fuzz on the skin, nectarines are characterized by the absence of fruit-skin trichomes (fuzz-less fruit); genetic studies suggest nectarines are produced due to a recessive allele, whereas peaches are produced from a dominant allele for fuzzy skin. China is the world's largest producer of peaches</p>
<p>Prunus persica grows to 4–10 m (13–33 ft) tall and 6 in. in diameter. The leaves are lanceolate, 7–16 cm (2.8–6.3 in) long, 2–3 cm (0.79–1.18 in) broad, pinnately veined. The flowers are produced in early spring before the leaves; they are solitary or paired, 2.5–3 cm diameter, pink, with five petals. The fruit has yellow or whitish flesh, a delicate aroma, and a skin that is either velvety (peaches) or smooth (nectarines) in different cultivars. The flesh is very delicate and easily bruised in some cultivars, but is fairly firm in some commercial varieties, especially when green. The single, large seed is red-brown, oval shaped, approximately 1.3–2 cm long, and is surrounded by a wood-like husk. Peaches, along with cherries, plums and apricots, are stone fruits (drupes). There are various heirloom varieties, including the Indian peach, which arrives in the latter part of the summer.</p>

这是我的 CSS:

.alignleft {
    float: left;
    margin: 0px 30px 20px 0;
}

Answer 1

实现所需内容的最简单方法是将段落包装在一个 div 中，并添加一个使其也 float 到左侧的类，然后为其添加宽度。这将使它保持在桃子的右侧，当屏幕变小时，它将把它推到桃子对象下方。

.alignleft {
float: left;
margin: 0px 30px 20px 0;
}

.alignright {
float: left;
width: 75%;
}