Crearea unui layout tabelar în editorul WYSIWYG

Question

Crearea unui layout tabelar în editorul WYSIWYG

17 aug. 2016, 07:39:40

Vizualizări: 14K

Voturi: 1

Am un design precum cel din imagine.

Exemplu de layout tabelar

Conținutul pentru acestea ar trebui să fie plasat într-un widget. Modul în care realizez acest lucru acum este: editând în editorul WYSIWYG folosind spații între texte. Există vreo altă metodă pentru a alinia corect acest lucru.

Am întâlnit astfel de layout-uri în multe dintre proiectele mele și până acum am folosit spații pentru a le alinia. Dar în proiectul recent am observat că utilizarea spațiilor nu este o soluție corectă, deoarece în cazul meu, fontul pe care îl folosesc se comportă ușor diferit pe diferite browsere, astfel încât spațiul nu este consistent.

Deci, folosind spații, obțin rezultatul corect pe Chrome, dar pe Firefox spațierea nu este aceeași.

Rezultat pe Firefox:

Exemplu de afișare incorectă pe Firefox

Presupun că ar putea exista o soluție mai bună pentru crearea unui astfel de layout tabelar în editorul WYSIWYG. Vă rog să-mi spuneți dacă există vreuna. Vă mulțumesc pentru timpul acordat.

Kiran Dash

381

editor wysiwyg editor de postare

Comentarii

Ar trebui să folosești un font mono-spațiat - https://youtu.be/SsoOG6ZeyUI

jgraup

17 aug. 2016 07:43:25

mersi pentru sugestie și pentru videoclip. LOL. dar ar trebui să folosesc același font. Deci, nu există nicio modalitate prin care să obțin același rezultat fără a folosi deloc spații.

Kiran Dash

17 aug. 2016 08:09:02

http://tympanus.net/codrops/css_reference/text-align/ - web dev 101. Poți crea 3 coloane într-un tabel [ align-right, center, align-left ]. Dar acesta nu este locul potrivit pentru discuții despre CSS. http://stackoverflow.com/a/9824175/5623301

jgraup

17 aug. 2016 08:23:13

Toate răspunsurile la întrebare

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

De ce nu folosești tabel? Spațiile sunt ridicole. În editorul WYSIWYG selectează un tabel cu 2 coloane și 3 rânduri, aliniază elementele din coloana din stânga la stânga, iar în dreapta la centru și totul ar trebui să funcționeze perfect.

EDIT. Ok, am văzut unde este problema. TinyMCE (editorul WYSIWYG) are opțiunea de tabel, dar implicit este dezactivată în WordPress. Poți descărca un plugin, de exemplu TinyMCE Advanced, și să activezi diverse opțiuni puternice din TinyMCE. De asemenea, poți comuta vizualizarea la editorul de text și să adaugi tabelul în HTML:

<table>
    <tr>
        <td>Celulă</td><td>Celulă</td>
    </tr>
    <tr>
        <td>Celulă</td><td>Celulă</td>
    </tr>
    <tr>
        <td>Celulă</td><td>Celulă</td>
    </tr>
</table>

Krzysztof Grabania

586

17 aug. 2016 08:32:47