Html 如何保持文本列在右侧保持在右侧

哪种最简单的方法可以将文本保留在该列的右侧？我将我的桃子图像浮动在左侧，但当右侧的文本超出桃子图像时，它的位置将位于桃子下方

如何保持文本在右侧的位置，而不让其进入左侧列

以下是我的JSFIDLE：

---

实现所需内容的最简单方法是将段落包装在div中，并添加一个类，该类也将段落向左浮动，然后向其添加宽度。这将允许它停留在桃子的右侧，当屏幕变小时，它会将其向下推到桃子对象的下方

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

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

---

以下是更新的小提琴：

只需将文本包装成div并向右浮动，给它一个百分比宽度。我选择20%作为左分区，79%作为右分区

我还去掉了页边空白

.alignleft {
    float: left;

    width:20%
}
#right {float:right; width:78%;}

---

您应该在另一个“div”中的右列中包装所需的文本，并为其指定display中table的属性：

.alignright {
    display:table;
}

---

下面是更新后的JSFIDLE:

使用javascript，您可以执行以下操作：

---

将所有的

p

放入

div

中，并应用此

CSS

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

.alignleft {
    float: left;
    margin: 0px 30px 20px 0;
    width:20%;
}
div{
    position:relative;
    float:left;
    width:70%;
}

桃子

卡路里59

总脂肪0.4克

钠0毫克

桃（Prunus persica）是一种落叶树，原产于中国西北部，位于塔里木盆地和昆仑山北坡之间，是最早驯化和栽培桃的地方。[2]它结有一种可食用的多汁果实，也称为桃。该物种的名称波斯是指其广泛种植在波斯，从那里它被移植到欧洲。它属于蔷薇科的李属，包括樱桃和李子。桃与杏仁一起归入扁桃亚属，与其他亚属的区别在于其波纹状的种皮

桃子和油桃是同一物种，尽管它们在商业上被视为不同的水果。与桃子不同，桃子的果实表面有特征性的绒毛，油桃的特征是没有果皮毛（无绒毛的果实）；遗传研究表明油桃是由隐性等位基因产生的，而桃子是由显性等位基因产生的。中国是世界上最大的桃子生产国

波斯李高4-10米（13-33英尺），长6英寸。直径。叶片披针形，长7-16厘米（2.8-6.3英寸），宽2-3厘米（0.79-1.18英寸），羽状脉。早春的时候，花比叶子长得早；它们是单生或成对的，直径2.5-3厘米，粉红色，有五片花瓣。果实果肉呈黄色或白色，香气细腻，不同品种的果皮要么天鹅绒般柔软（桃子），要么光滑（油桃）。在一些品种中，果肉非常脆弱，容易碰伤，但在一些商业品种中，尤其是绿色品种中，果肉相当坚硬。单个大种子呈红棕色，椭圆形，长约1.3-2厘米，周围有木质外壳。桃子、樱桃、李子和杏子是核果（核果）。有各种各样的传家宝品种，包括在夏末到达的印度桃

.左对齐{
浮动：左；
利润率：0px 30px 20px 0；
宽度：20%；
}
div{
位置：相对位置；
浮动：左；
宽度：70%；
}

.alignright {
    display:table;
}

.alignleft {
    float: left;
    margin: 0px 30px 20px 0;
}
.nextDiv{
    display:inline-block;
}

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

.alignleft {
    float: left;
    margin: 0px 30px 20px 0;
    width:20%;
}
div{
    position:relative;
    float:left;
    width:70%;
}