Ett blocknivåelement i ett HTML-dokument (t.ex. en webbsida) visas i sekventiell ordning. För att ändra ordern så att sidan ser mer tilltalande ut eller för att förbättra dess användbarhet måste du pakka in block, inklusive bilder, så att texten på den sidan rinner runt den.
I webb termer är denna effekt känd som "flytande" bilden. Denna stil uppnås med CSS-egenskapen för "float". Den här egenskapen låter text flöda runt den vänsterjusterade bilden till höger sida. Eller runt en högerlinjad bild till vänster sida.
Börja med HTML
Det första du behöver göra är att ha lite HTML att arbeta med. För vårt exempel skriver vi ett stycke text och lägger till en bild i början av stycket (före texten, men efter öppningen
märka). Så här ser det här HTML-markupet ut:
Texten i stycket går här. I det här exemplet har vi en bild av ett headshot-foto, så den här texten kommer sannolikt att handla om den person som headshotet är för.
Som standard visas vår webbsida med bilden ovanför texten, eftersom bilder är blockelement i HTML. Det betyder att webbläsaren visar radbrytningar före och efter bildelementet som standard. Vi ändrar det här standardutseende genom att vända sig till CSS. Först kommer vi dock att lägga till ett klassvärde för vårt bildelement. Den klassen kommer att fungera som en "krok" som vi kommer att använda i vår CSS senare.
Texten i stycket går här. I det här exemplet har vi en bild av ett headshot-foto, så den här texten kommer sannolikt att handla om den person som headshotet är för.
Observera att denna klass av "vänster" inte gör någonting alls på egen hand. För att vi ska kunna nå vår önskade stil behöver vi använda CSS nästa.
CSS-stilar
Med vår HTML på plats (inklusive vårt klassattribut av "vänster") kan vi nu gå till CSS. Vi skulle lägga till en regel i vårt stilark som skulle flyta den bilden och även lägga till en liten polstring bredvid den så att texten som i slutändan läggs runt bilden inte stämmer mot den för nära. Här är CSS du kan skriva:
.vänster { flyta till vänster; vaddering: 0 20px 20px 0;}
Denna stil flyter den bilden till vänster och lägger till en liten polstring (med en del CSS-stenografi) till höger och längst ner på bilden. Om du granskade sidan som innehåller den här HTML-filen i en webbläsare, skulle bilden nu justeras till vänster och texten i stycket framträder till höger med en lämplig mängd avstånd mellan de två. Notera klassvärdet för "vänster" som vi använde är godtyckligt. Vi skulle kunna kalla det något eftersom termen "vänster" inte gör någonting själv. Vilken term du än använder måste ha en klassattribut i HTML som fungerar med en faktisk CSS-stil som dikterar de visuella förändringarna du vill göra. Detta tillvägagångssätt att ge bildelementet en klassattribut och sedan använda en generell CSS-stil som flyter elementet är bara ett sätt att du kan uppnå detta "vänsterjusterade bild" -utseende. Du kan också ta bort klassvärdet av bilden och utforma den med CSS genom att skriva en mer specifik väljare. Låt oss exempelvis titta på ett exempel där den bilden är inuti en division med ett "huvudinnehåll" klassvärde. För att ställa in den här bilden kan du skriva den här CSS: .main-innehåll img { flyta till vänster; vaddering: 0 20px 20px 0;}
I det här scenariot skulle vår bild vara inriktad till vänster, med texten flytande runt den som tidigare, men vi behövde inte lägga till ett extra klassvärde för vår uppställning. Om du gör det i stor skala kan du skapa en mindre HTML-fil, vilket blir enklare att hantera och kan också förbättra prestandan. Slutligen kan du till och med lägga till stilar direkt i HTML-uppställningen, så här:
Denna metod kallas "inline styles." Det är inte tillrådligt eftersom det kombinerar stilen hos ett element med dess strukturella markup. Webbens bästa praxis dikterar att en sidas stil och struktur ska förbli separata. Denna segregering är speciellt användbar när din sida behöver ändra sin layout och leta efter olika skärmstorlekar och enheter med en mottaglig webbplats. Med stilen på sidan sammanflätad i HTML-filen blir det mycket svårare att skriva förfrågan på mediafrågor som anpassar webbplatsens utseende efter behov för de olika skärmarna. Alternativa sätt att uppnå dessa stilar
Texten i stycket går här. I det här exemplet har vi en bild av ett headshot-foto, så den här texten kommer sannolikt att handla om den person som headshotet är för. Undvik inline stilar
Texten i stycket går här. I det här exemplet har vi en bild av ett headshot-foto, så den här texten kommer sannolikt att handla om den person som headshotet är för.
