圍繞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

只需要刪除'的margin-top：100px的;'從表中。 – Stickers

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

來源

2017-02-13 19:45:42 Jesse

圍繞div打包文本不起作用

回答

相關問題