Hvordan plassere bilder side om side i WordPress

July 12

WordPress har begrensede muligheter for å vise bilder i et innlegg. Du kan vise et bilde på begynnelsen av linjen og sentrer det eller konfigurere teksten å vikle rundt hver side. Hvis du plasserer to bilder sammen WordPress viser hver på sin egen linje; det er ingen mulighet for visning av bilder ved siden av hverandre, med mindre du oppretter et galleri. Men støtter HTML-koding viser bilder ved siden av hverandre, og du kan tvinge WordPress til å gjøre dette ved å legge en bit av koden i posten editor.

Bruksanvisning

1 Plasser markøren på det stedet i innlegget editor hvor du vil de to bildene skal vises.

2 Klikk på "Legg til et bilde" knappen over innlegget redaktør og laste opp det første bildet fra datamaskinen eller velge et bilde som du allerede har lastet opp til galleriet. Klikk på "Sett inn Post" knappen for å legge til bildet i innlegget.

3 Legg det andre bildet til innlegget på samme måte.

4 Klikk på "HTML" -kategorien over innlegget redigeringsfeltet for å vise kildekoden for stillingen, og plassere markøren i den første tomme linjen ovenfor koden for første bildevedlegg. Vedlegget starter med «<a rel =" vedlegg ".

5 Skriv inn koden "<div style =" display: inline-block; margin-right: 5px ">" uten anførselstegn. Du kan finne det nyttig å kopiere koden fra denne artikkelen for å unngå en skrivefeil. Tallet etter "margin-right" indikerer avstanden mellom de to bildet i piksler. Endre nummeret for å endre avstanden mellom de to bildene.

6 Flytt markøren til den første tomme linjen etter koden for første bildevedlegg. Koden slutter med navnet på bildet og tag "betaler."

7 Type "</ div>" uten anførselstegn i den blanke linjen.

8 Flytt markøren til den første tomme linjen før koden for det andre bildet. Hvis det ikke er tom linje, trykk "Enter" for å opprette en.

9 Type "<div style =" display: inline-block ">" i den blanke linjen.

10 Type "</ div>" i den første tomme linjen etter koden for det andre bildet.

11 Lagre eller oppdatere innlegget.

Hint

For å sentrere de to bildene i innlegget ditt, skriv inn koden "<div style =" text-align: center ">" i en blank linje over koden for det første bildet, og skriv inn "</ div>" i første blank linje etter koden for det andre bildet.