在 div 周围环绕文字不起作用

Question

如您所见，我有一个 div（包含图片）在另一个 div 中。但为什么文本不环绕 div？为什么在右侧遗漏了一些 space？ 1

非常感谢您的回答！！

#table {
  clear: both;
  float: right;
  margin-top: 100px;
  margin-right: 10px;
  min-width: 100px;
  min-height: 150px;
  background-color: rgb(230, 230, 230);
  border: 1px solid black;
  right: 0;
  align: right;
}
#body {
  background-color: white;
  border: 1px solid black;
  width: 50%;
  height: 95vh;
  margin: 0 auto;
  margin-top: 20px;
  z-index: 1;
}

<body>
  <div id="article">Artikel</div>
  <div id="body">
    <div id="navigation">
      <br>
      <img src="../Logo/logomittext.svg" alt="SCHWIKI" width="100%">
      <br>
      <br>
      <a href="../index.html">Hauptseite</a>
      <br>
      <a href="Schwiki.html">Schwiki</a>
      <br>
      <a href="Änderungsprotokoll.html">Änderungsprotokoll</a>
      <br>
      <hr>
      <a href="LPI_Linux_Essentials.html">LPI Linux Essentials</a>
    </div>
    <div id="content">
      <h1>LPI Linux Essentials</h1>
      <div id="meta">
        <script language="Javascript" src="../Js/zulbearb.js">
        </script>
      </div>
      <hr>
      <div id="table">
        <img src="../Images/LPI-Essentials.jpg" alt="LPI-Essentials" width="300px">
        <table>
          <tr>
            <th>Aktuelle Version:</th>
            <td>1.5 (Prüfung 010-150)</td>
          </tr>
          <tr>
            <th>Voraussetzungen:</th>
            <td>keine</td>
          </tr>
          <tr>
            <th>Gültigkeit:</th>
            <td>Lebenslang</td>
          </tr>
        </table>
      </div>
      <p>Das Schwiki ist ein Nachschlagewerk für Themen, welche die Informationstechnologie betreffen. Es ist ein Pilotprojekt, das für die Verbesserung der Erfahrungen des Erstellers in Bezug auf das Erstellen von Websiten erstellt wurde.</p>
    </div>
  </div>
</body>

Answer 1

margin-top: 100px; 似乎是一个拼写错误 — 也许您的意思是 10px？进行更改，它会修复它。

此外，clear: both;、right: 0; 和 align: right; 都可以删除，因为它们要么没有做任何事情，要么语法不正确。

在这里，我调整了 CSS，并将左侧的文本量增加了一倍，这样更容易换行。

#table {
float: right;
margin-top: 10px;
margin-left: 10px;
min-width: 100px;
min-height: 150px;
background-color: rgb(230,230,230);
border: 1px solid black;
right: 0;
}
#body {
background-color: white;
border: 1px solid black;
width: 50%;
height: 95vh;
margin: 0 auto;
margin-top: 20px;
z-index: 1;
}

<div id="article">Artikel</div>
    <div id="body">
        <div id="navigation">
            <br>
            <img src="../Logo/logomittext.svg" alt="SCHWIKI" width="100%">
            <br>
            <br>
            <a href="../index.html">Hauptseite</a>
            <br>
            <a href="Schwiki.html">Schwiki</a>
            <br>
            <a href="Änderungsprotokoll.html">Änderungsprotokoll</a>
            <br>
            <hr>
    <a href="LPI_Linux_Essentials.html">LPI Linux Essentials</a>
        </div>
        <div id="content">
            <h1>LPI Linux Essentials</h1>
            <div id="meta">
                <script language="Javascript" src="../Js/zulbearb.js">
                </script>
            </div>
            <hr>
    <div id="table">
                <img src="../Images/LPI-Essentials.jpg" alt="LPI-Essentials" width="300px">
                <table>
                    <tr>
                        <th>Aktuelle Version:</th>
                        <td>1.5 (Prüfung 010-150)</td>
                    </tr>
                    <tr>
                            <th>Voraussetzungen:</th>
                            <td>keine</td>
                    </tr>
                    <tr>
                            <th>Gültigkeit:</th>
                            <td>Lebenslang</td>
                    </tr>
                </table>
            </div>
            <p>Das Schwiki ist ein Nachschlagewerk für Themen, welche die Informationstechnologie betreffen. Es ist ein Pilotprojekt, das für die Verbesserung der Erfahrungen des Erstellers in Bezug auf das Erstellen von Websiten erstellt wurde. Das Schwiki ist ein Nachschlagewerk für Themen, welche die Informationstechnologie betreffen. Es ist ein Pilotprojekt, das für die Verbesserung der Erfahrungen des Erstellers in Bezug auf das Erstellen von Websiten erstellt wurde.</p>
        </div>
    </div>

在 div 周围环绕文字不起作用

wrapping text around div doesn't work

html

css

text

paragraph