Domanda

Voglio due immagini di apparire side-by-side. Tuttavia, WordPress inserisce una linea-break tra gli elementi, anche se io uso l'editor HTML, piuttosto che l'editor di Visual.

Come posso fare l'editor di fiducia che se non si inserisce una linea-break, io non lo voglio?

È stato utile?

Soluzione

Per evitare l'interruzione di riga durante la pubblicazione 2 immagini affiancate assegnare l'AlignLeft o di classe AlignRight a loro e li mise sulla stessa linea nell'editor senza saltare eventuali spazi tra di loro.

Esempio:

<img src="/wp-content/uploads/your_image.jpg" alt="" class="alignleft" /><img src="/wp-content/uploads/your_image2.jpg" alt="" class="alignright" />

Modifica Ho dimenticato di dire che il contenuto dopo che le immagini galleggiavano overflow tra le immagini a meno che non si cancella i carri. Aggiungo: <div class="clear">&nbsp;</div> dopo che le immagini e aggiungi .clear {clear:both;} al mio css

.

Altri suggerimenti

Insieme con quello che ha detto @Chris_O, quando ci si trova nell'editor per le immagini selezionate a sinistra su uno e destro sull'altro. Ciò si applica alle classi AlignLeft e AlignRight, rispettivamente.

Il vostro tema deve avere le classi CSS definito, se si dispone di uno dal fornitore, sono quindi più probabile lì, ma nel caso in cui essi non sono, basta andare in l'editor tema e aggiungerli al CSS:

.alignleft {float:left;}
.alignright {float:right;}

Mi piace anche aggiungere qualcosa di simile per le immagini che galleggiante, dal momento che il test potrebbe avvolgere intorno a loro;

img.alignleft, img.alignright {
padding: 5px;
display: inline;
}

Ovviamente è possibile aggiungere margini o cambiare l'imbottitura internet a vostro gusto.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a wordpress.stackexchange
scroll top