So verhindern Sie einen zusätzlichen unteren Rand beim Schweben eines Bildes mit TextCSS

CSS verstehen
Guest
 So verhindern Sie einen zusätzlichen unteren Rand beim Schweben eines Bildes mit Text

Post by Guest »

Ich habe einen Block, der aus einem Bild mit Text umwickelt ist: < /p>

Code: Select all

* * * T T T
* * * T T T
* * * T T T
T T T T T T

H H H
wobei * das Bild darstellt, t Text und H ist ein Header, der dem Text-/Bildblock folgt.
Ich brauche CSS -Regeln, die beide Bedingungen erfüllen: < /p>

< /ol>

Code: Select all

* * * T T T
* * * T T T
* * * T T T
* * *
* * *

H H H
< /code>
In diesem Fall fällt der Rand des Bildes nicht zusammen und fügt stattdessen zu Hs Margin-Top hinzu, was unerwünschten zusätzlichen Speicherplatz schafft. Ich erreiche das gewünschte Verhalten? = "Snippet-Code">
.container {
max-width: 600px;
margin-bottom: 30px;
font-family: Arial, sans-serif;
line-height: 1.6;
display: block;
}

.float-image {
float: left;
margin-right: 15px;
margin-bottom: 15px;
width: 150px;
height: auto;
}

.container::after {
content: "";
display: block;
clear: both;
}

.header {
margin-top: 30px;
}< /code>

[img]https://dummyimage.com/150x150/c6ff83/000000[/img]

This is an example of an image floated to the left with text wrapping around it.

Header

Quick Reply

Change Text Case: 
   
  • Similar Topics
    Replies
    Views
    Last post