Hvordan sette inn to bilder horisontalt med HTML

Hvordan sette inn to bilder horisontalt med HTML


I HTML, må du legge inn bilder ved hjelp av <img> -taggen og style dem ved hjelp av Cascading Style Sheet (CSS) kode. Du kan stille opp bilder i en horisontal rad med "flytende" dem, men du trenger å holde fløt bildene fra å bryte dine Web sideoppsett. Legge til en <div> tag rundt bildene bidrar til å holde dem på plass. Etter samkjøre bilder, bruker CSS for å legge avstand og andre styling til bildene. Denne teknikken er nyttig for å lage bildegalleri sider.

Bruksanvisning

1 Legg en <img> -taggen for hvert bilde i HTML-dokumentet. Plasser hver <img> tag på en egen linje, men fortsatt ved siden av de andre. Bruk "src" attributt for å definere filbanen - Web adresse - til hvert bilde, slik:

<Img src = "sti / til / image1.png">
<Img src = "sti / til / image2.png">

2 Lagre HTML-fil og sjekke det i nettleseren. Hvis området er allerede lever på en webserver, må du huske å laste opp både den oppdaterte HTML-fil pluss begge bildene. Begge bildene skal allerede stille opp side-by-side. Dette skjer fordi, selv om du putter hver <img> tag på en egen linje, gjorde du ikke pakk dem i <p> ​​koder for å lage avsnitt eller legge til en
tag å bryte linjer. Noen ganger din CSS-kode vil føre til at bildene ikke vises side ved side, skjønt. Du må også CSS til verdensrommet bildene.

3 Rediger CSS på websiden for å sørge for at bildene alltid stille opp horisontalt. Legg CSS-koden til en ekstern CSS-fil eller mellom <style> tags, som går mellom <head> taggene på toppen av HTML-dokumentet. Her er eksempel koden:

img {float: left; margin-right: 10px; margin-bottom: 10px;}

Koden ovenfor "flyter" hver forekomst av <img> -taggen til venstre for det som er tilstøtende på siden. Noe til høyre for en venstre-fløt tag brytes rundt fløt elementet. Legg padding eller marginer til verdensrommet bildene.

4 Pakk <img> koder med en <div> tag og gi <div> tag en id-attributt. Navn ID-attributtet noe unikt og meningsfylt. Her er et eksempel:

<Div id = "bilder">
<Img src = "sti / til / image1.png" />
<Img src = "sti / til / image2.png" />
</ Div>

5 Skriv følgende CSS-kode for å holde fløt bildene fra "flyte opp" i annet innhold:

bilder {klar: begge;}

Du kan også endre CSS-koden til å flyte bare bilder funnet mellom <div> tagger med en ID på "bilder" som så:

bilder img {float: left;}

Hint

  • Lær CSS boksen modellen for å bedre forstå hvordan du skal plassere bilder, tekst og mer på websidene. Boksen Modellen beskriver hvordan størrelser og grenser HTML-bilder er beregnet av nettlesere.
  • Alltid sikkerhetskopiere HTML og CSS-filer når du redigerer websider.