Creare layout a tabella nell'editor WYSIWYG

Question

Creare layout a tabella nell'editor WYSIWYG

17 ago 2016, 07:39:40

Visualizzazioni: 14K

Voti: 1

Ho un design come mostrato nell'immagine.

Layout a tabella da replicare

Il contenuto per questi elementi dovrebbe essere inserito in un widget. Attualmente lo sto realizzando modificandolo nell'editor WYSIWYG utilizzando spazi tra i testi. Esiste un altro modo per allinearlo correttamente?

Mi sono imbattuto in layout simili in molti dei miei progetti e fino ad ora ho sempre utilizzato spazi per allinearli. Ma nel mio recente progetto ho notato che usare spazi non è la soluzione corretta perché, nel mio caso, il font che sto usando si comporta in modo leggermente diverso su diversi browser e quindi lo spazio non è consistente.

Usando gli spazi ottengo il risultato corretto su Chrome ma su Firefox lo spaziamento non è lo stesso.

Risultato su Firefox:

Problema di allineamento su Firefox

Immagino possa esserci una soluzione migliore per creare questo tipo di layout tabellare nell'editor WYSIWYG. Fatemi sapere se ne conoscete. Grazie per il vostro tempo.

Kiran Dash

381

editor wysiwyg editor di post

Commenti

Dovresti usare un font mono-spaziato - https://youtu.be/SsoOG6ZeyUI

jgraup

17 ago 2016 07:43:25

grazie per il suggerimento e il video. LOL. ma dovrei usare lo stesso font. Quindi, non c'è modo di ottenere lo stesso risultato senza usare affatto spazi?

Kiran Dash

17 ago 2016 08:09:02

http://tympanus.net/codrops/css_reference/text-align/ - web dev 101. Puoi creare 3 colonne in una tabella. [ allineamento-destra, centro, allineamento-sinistra ]. Ma questo non è il posto per discutere di CSS. http://stackoverflow.com/a/9824175/5623301

jgraup

17 ago 2016 08:23:13

Tutte le risposte alla domanda

Krzysztof Grabania 586 · Accepted Answer · 2016-08-17T08:32:47Z

Perché non stai usando le tabelle? Gli spazi sono ridicoli. Nell'editor WYSIWYG seleziona una tabella con 2 colonne e 3 righe, allinea gli elementi nella colonna di sinistra a sinistra e quelli a destra al centro e tutto dovrebbe funzionare bene.

MODIFICA. Ok, vedo dov'è il problema. TinyMCE (l'editor WYSIWYG) ha l'opzione per le tabelle, ma di default è disabilitata in WordPress. Puoi scaricare un plugin, ad esempio TinyMCE Advanced, e abilitare varie e potenti opzioni di TinyMCE. Inoltre, puoi passare alla visualizzazione editor di testo e aggiungere una tabella in HTML:

<table>
    <tr>
        <td>Cell</td><td>Cell</td>
    </tr>
    <tr>
        <td>Cell</td><td>Cell</td>
    </tr>
    <tr>
        <td>Cell</td><td>Cell</td>
    </tr>
</table>

Krzysztof Grabania

586

17 ago 2016 08:32:47