Question

在该列中保留文本的最简单方法是什么？我把我的桃子图像漂浮在左边，但是当右边的文字超出了桃子的图像时，它的位置就会落在桃子的下方。

如何保持文本在右侧的位置，而不是让它进入左栏？

这是我的傻瓜：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中，并添加一个将其浮动到左侧的类，然后为其添加宽度。这将使它保持在桃子的右边，当屏幕变小时，它会将它推到桃子对象下面。

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

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

Answer 2

这是更新的小提琴：

http://jsfiddle.net/YoshiMaster/7esyct27/1/

将文本包装在div中并向右浮动，给它一个百分比宽度。我为左div选择了20％，为右div选择了79％。

我也拿走了边缘。

.alignleft {
    float: left;

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

Answer 3

您应该将右侧列中所需的文字换行到另一个＆＃39; div＆＃39;并在显示中给它表的属性：

.alignright {
    display:table;
}

这里有更新的jsfiddle：http://jsfiddle.net/alonbrimzy/7esyct27/4/

Answer 4

使用javascript，您可以执行此操作：look at the fiddle

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

Answer 5

将所有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%;
}

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

5 个答案: