HTML / CSS 向左浮动不适用于我的代码

Question

我目前正在自学 HTML / CSS。 经过一些教程后，我现在正在构建我自己的第一个项目。 我尝试使用 CSS 在我的页面上构建三个图像和三个文本。

结构应如下所示：

Text - Image
Image - Text
Text - Image. 

我试图分别用 float: right 和 float: left 定位图像。 但是所有三个图像都一次又一次地位于右侧。

你能帮助我吗？ 非常感谢。

 <div class="Food"> <div> <p class="Foodtext"> fvjkhfhikvfdhilvdlhifbikfddbuukubfkuvbduhvdjhvdfkuvhukufvhjkdfuubfdkuhvhukvvhukfdubbf </p> </div> <div> <img src=speise.jpg alt="Speise" style="float: right"> </div> </div> <h3>Wine</h3> <div class="Wine"> <p class="Winetext"> fhkvbshukveuvbkdfjvbuvfdsfkufbekfbgkrbkfewrrkgbgburfbuehu </p> </div> <div> <img src="wein.jpg" alt="Weinregal" style="float: left"> </div> </div> <h3>Music</h3> <div class="Music"> <div> <p class="Musictext"> vbhuireeehugoreiur8hgeoirorguuhghirruhgfuhkgrhukge</p> </div> <div> <img src="dj.jpg" alt="DJ legt auf" style="float: right"> </div> </div>

Answer 1

您已经将图像漂浮在div 中，它们自己。 这就像试图在衣服内向右移动。 浮动图像应该与您想要围绕它们流动的内容具有相同的父级。

所以只需合并div。 您甚至可能希望段落中的图像。

此外，一定要使用好的编辑器（或至少通过 HTML 验证器运行您的代码）。 两者都会使结构和语义错误变得明显。

 <div class="Food"> <div> <p class="Foodtext"> fvjkhfhikvfdhilvdlhifbikfddbuukubfkuvbduhvdjhvdfkuvhukufvhjkdfuubfdkuhvhukvvhukfdubbf </p> <img src="https://via.placeholder.com/100" alt="Speise" style="float: right"> </div> </div> <h3>Wine</h3> <div class="Wine"> <p class="Winetext"> fhkvbshukveuvbkdfjvbuvfdsfkufbekfbgkrbkfewrrkgbgburfbuehu </p> <img src="https://via.placeholder.com/100" alt="Weinregal" style="float: left"> </div> <h3>Music</h3> <div class="Music"> <div> <p class="Musictext"> vbhuireeehugoreiur8hgeoirorguuhghirruhgfuhkgrhukge</p> <img src="https://via.placeholder.com/100" alt="DJ legt auf" style="float: right"> </div> </div>

Answer 2

发生这种情况是因为您正在为图像设置样式，而您的图像位于新的 div 中。

试试这个代码

<div class="Food">
  <div>
    <p class="Foodtext">
      fvjkhfhikvfdhilvdlhifbikfddbuukubfkuvbduhvdjhvdfkuvhukufvhjkdfuubfdkuhvhukvvhukfdubbf
    </p>
  </div>
  <div style="float: right">
    <img src=speise.jpg alt="Speise">
  </div>
</div>
<h3>Wine</h3>
<div class="Wine">
  <p class="Winetext">
    fhkvbshukveuvbkdfjvbuvfdsfkufbekfbgkrbkfewrrkgbgburfbuehu
  </p>
</div>
<div style="float: left">
  <img src="wein.jpg" alt="Weinregal">
</div>
</div>
<h3>Music</h3>
<div class="Music">
  <div>
    <p class="Musictext"> vbhuireeehugoreiur8hgeoirorguuhghirruhgfuhkgrhukge</p>
  </div>
  <div style="float: right">
    <img src="dj.jpg" alt="DJ legt auf">
  </div>
</div>

这样做，它应该可以工作，您可能还需要指定 div 的最大宽度，并将 100% 的宽度应用于图像，以防您应用最大宽度，休息这应该可以工作！