divの周りにテキストをラップすると動作しません

ご覧のとおり、別のdivにあるdiv（画像を含む）があります。しかし、なぜテキストがdivを囲んでいないのですか？なぜ、右側に余白が残っているのですか？ 1 divの周りにテキストをラップすると動作しません

ありがとうございました！

#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>

出典

2017-02-13 FrankTheTank

ジャスト 'マージントップ削除する必要があります：100pxにし;'テーブルから。 – Stickers

margin-top: 100px;は、タイプミスのようです - 多分あなたは10pxを意味？その変更を加えると、修正されます。

また、clear: both;、right: 0;、およびalign: right;は、何もしていないか、適切な構文がないため、すべて削除できます。

ここでは、CSSを調整し、左側のテキストの量を2倍にしてより簡単に折り返します。

#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>

出典

2017-02-13 19:45:42 Jesse

divの周りにテキストをラップすると動作しません

答えて

関連する問題