Om du är intresserad av att lära dig att flyta en bild till höger om texten är det en ganska enkel uppgift. Det finns många situationer där programmerare vill att en bild på en webbsida ska visas inuti texten med texten flödande eller lindad runt den. Manipulera bilder liknar att manipulera text, så om du har erfarenhet av den senare borde processen inte vara svår alls.
Med CSS float-egenskapen är det faktiskt lätt att flyta din bild till höger om texten och få texten att flyta runt på vänster sida. Använd denna fem-minuters handledning för att lära dig hur.
Ställa in en layout med flytande
Denna grundläggande layout skapar ett utrymme för din text och flyter en bild till höger om den texten. Visst kan dessa layouter bli mer komplicerade, men det här exemplet visar den grundläggande principen bakom att arbeta med float och text.
Förutsatt att du redan har ett HTML-dokument som du arbetar med och ett separat CSS-stilark, börja med att skapa en ny div för att fungera som raden som innehåller ditt flytande element.
Ge den nya div två klasser, container och clearfix. Det finns många sätt att hantera detta, och namnen är helt ditt val, men dessa hjälper dig att hålla ordning och skapa din layout.
-
Definiera i din CSS hur du vill att din container ska passa in i din övergripande layout. Detta exempel kommer bara att göra det till en rad med full bredd.
.behållare {
bredd: 100%;
höjd: 25rem;
} -
Ta sedan hand om clearfix-klassen. Clearfix är nödvändigt eftersom float kan skapa några udda fel i din layout. Definitionen av "överflöd" -egenskapen i clearfix hindrar de flytande elementen från att blöda ut ur deras utsedda utrymme.
.clearfix {
överflöde: auto;
} -
Nu kan du skapa ett element i din container div och flyta det till höger. Om du slår in text runt en bild skulle det vara din bild. Skapa elementet och ge det en klass för float-egenskapen.
-
Skapa klassen för din flottör. Du kommer antagligen vilja kasta lite styling där också, om du gör mer identiska element. Annars kan du använda en separat klass för din styling.
.float-right {
flyta: höger;
bredd: 300 pixlar;
höjd: 200px;
bakgrundsfärg: röd;
marginal: 0 0 0.5rem 0.5rem
} -
Om du vill lägga in text runt det flytande elementet, sätt in din text nu. Lägg den var som helst i behållaren, antingen före eller efter det flytande elementet.
Lite text
Mer text
...och så vidare.
-
Uppdatera din sida och kolla in resultatet.
Avslutar
Och det gör det. Nu ser du att det är svårt att sväva en bild till höger alls. Du kanske också är intresserad av att flyta en bild till vänster och flyta den till mitten. Medan det första steget är möjligt, kan du tyvärr inte flytta en bild till mitten, eftersom det vanligtvis kräver en tvåkolumnlayout.