Question

当我将food.png向右浮动并尝试让文本浮动时，它似乎无法正常工作。有什么建议吗？

HTML

<div id="main">
        <article>
            <h2>Why Sunflower Seeds?</h2>
                <img src="images/seed.png" alt="seed" class="seed">
                <p class="why">Sunflower seeds are an excellent source of vitamin E, the body's primary fat-soluble antioxidant. Vitamin E travels throughout the body neutralizing free radicals that would otherwise damage fat-containing structures and molecules, such as cell membranes, brain cells, and cholesterol. By protecting these cellular and molecular components, vitamin E has significant anti-inflammatory effects that result in the reduction of symptoms in asthma, osteoarthritis, and rheumatoid arthritis, conditions where free radicals and inflammation play a big role. Vitamin E has also been shown to reduce the risk of colon cancer, help decrease the severity and frequency of hot flashes in women going through menopause, and help reduce the development of diabetic complications.</p><img src="images/food.png" alt="food" class="food">
        </article>
    </div>

CSS

.food {
width: 43%;
float: right;
margin-top: -150px;}

p.why {
margin-right: 15px;
margin-left: 25px;
font-family: century gothic;
line-height: 1.7em;
font-weight: bold;
clear: both;
font-size: 12px;
position: relative;}

Answer 1

将食物图像放在<p>顶部，向右浮动并移除margin-top。然后从<p>右侧移除浮动。完成

＆＃13;

.why {
  margin-right: 15px;
  margin-left: 25px;
  font-family: "Century Gothic", sans-serif;
  line-height: 1.7em;
  font-weight: bold;
  font-size: 12px;
  position: relative;
}

.food {
  width: 43%;
  float: right;
}

＆＃13;

<article>
  <h2>Why Sunflower Seeds?</h2>
  <img src="images/seed.png" alt="seed" class="seed">
  <p class="why">
    <img src="images/food.png" alt="food" class="food">
    Sunflower seeds are an excellent source of vitamin E, the body's primary fat-soluble antioxidant. Vitamin E travels throughout the body neutralizing free radicals that would otherwise damage fat-containing structures and molecules, such as cell membranes, brain cells, and cholesterol. By protecting these cellular and molecular components, vitamin E has significant anti-inflammatory effects that result in the reduction of symptoms in asthma, osteoarthritis, and rheumatoid arthritis, conditions where free radicals and inflammation play a big role. Vitamin E has also been shown to reduce the risk of colon cancer, help decrease the severity and frequency of hot flashes in women going through menopause, and help reduce the development of diabetic complications.
  </p>
</article>

＆＃13;

Answer 2

你的意思是让文字浮动吗？和food.png浮动吧？

如果是这样，只需在float:left;班级

添加p.why即可

Answer 3

默认情况下，

p是一个块元素。

所有块元素都显示在单独的块中。

所以制作你的p.why内联元素。只需将display:inline;样式添加到p.why元素

即可

Answer 4

将图像放在<p>的内部和开头，然后换行就可以了。（我使用了不同的图像，所以我可以看到它。）

<div id="main">
    <article>
        <h2>Why Sunflower Seeds?</h2>
        <img src="images/seed.png" alt="seed" class="seed"/>
        <p class="why"><img src="https://kalabalu.files.wordpress.com/2013/04/716-649x649.jpg" alt="food" class="food"/>Sunflower seeds are an excellent source of vitamin E, the body's primary fat-soluble antioxidant. Vitamin E travels throughout the body neutralizing free radicals that would otherwise damage fat-containing structures and molecules, such as cell membranes, brain cells, and cholesterol. By protecting these cellular and molecular components, vitamin E has significant anti-inflammatory effects that result in the reduction of symptoms in asthma, osteoarthritis, and rheumatoid arthritis, conditions where free radicals and inflammation play a big role. Vitamin E has also been shown to reduce the risk of colon cancer, help decrease the severity and frequency of hot flashes in women going through menopause, and help reduce the development of diabetic complications.</p>
    </article>
</div>

CSS：

.food {
float:right;
}

尝试将图像浮动到文本右侧

4 个答案: