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% 的寬度應用於圖像，以防您應用最大寬度，休息這應該可以工作！