обертывание текста вокруг 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 и удвоил количество текста слева, чтобы он обертывался легче.

#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 не работает

ответ

Смежные вопросы