Escribir un texto en dos columnas como si se tratara de un artículo de un diario cualquiera es muy fácil si aplicas un código en la zona de redactar entradas (Edición de HTML).

Este truco se puede catalogar como uno de los que se aplican a los textos y son de utilidad cuando armamos un post.
En ocasiones, si nos da la real gana, puede servir para que un texto no se haga demasiado largo o para darle un aire periodístico a la entrada. Cualquier opción que ronde por la imaginación es válida.


Lo más habitual es:

Escritorio - Nueva entrada - Edición de HTML y copiar el códido

Después en Redactar, das rienda suelta a tu imaginación y escribe lo que desees.



Por experiencia propia sé que cuando te enfrentas a un código, sea el que sea, te "pones mal@". Lo mejor es pasar de todo y dejarse llevar. Si sale mal....., otro día saldrá muuuuuucho mejor. Algunas veces cuestión de "prueba y error".

• Opción A:

Realizamos lo más simple.




<div style="float:left; width: 45%">texto-columna-izquierda</div><div style="float:right; width: 45%">texto-columna-derecha</div><div style="clear: both"></div>







Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat




• Opción B:

Supongamos que queremos que las dos columnas salgan con unas características que a nosotros nos lo haga más atractivo, es decir que el texto salga justificado.
Si es así basta con añadir esta preferencia a las órdenes primarias anteriores dentro de la orden style :







<div style="float: left; width: 45%; text-align: justify;">Texto de la columna (lado izquierdo)</div><div style="float: right; width: 45%; text-align: justify;">Texto de la columna (lado derecho)</div><div style="clear: both"></div>





Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat








• Opción C:

También puedes colocar una imagen en lugar de la primera letra o directamente la imagen que te dé la santa gana. Para ello basta con añadir una orden al lado de <div style="float: left; width: 45%; text-align: justify;"> la línea:




<img style="margin: 0px; float: left;" src="URL de la imagen" alt="imagen o letra" border="0" />






Es decir, quedando:





<div style="float: left; width: 45%; text-align: justify;"><img style="margin: 0px; float: left;" src="URL de la imagen" alt="imagen" border="0" />Texto de la columna (lado izquierdo)</div><div style="float: right; width: 45%; text-align: justify;">Texto de la columna (lado derecho)</div><div style="clear: both"></div>







letra Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat




Nota:

También resulta con:


<table><td style="width:40%;margin-top:0px;padding:15px;"><p style="text-align:justify;">AQUI EL TEXTO DE LA PRIMERA<br />COLUMNA DEL POST</p> <td style="width:40%;margin-top:0px;padding:15px;"><p style="text-align:justify;">AQUI EL TEXTO DE LA SEGUNDA COLUMNA DEL POST</p> </table>




Más apuntes en Trucos de Texto



3 comentarios:

LadyMarian

Me imagino que esto amplía mucho las posibilidades. No sabía que existía una forma de hacerlo. En mi caso no me surgió la necesidad de usarlo pero me parece una herramienta útil para muchos blogs.

Besos

Lujo

Holaa LadyMarian
Era uno de esos post que nunca terminaba. Eso sí, acudía a mis apuntes "cada dos por tres".
Algunas veces puede ser de utilidad y la fórmula que usa es fácil de hacer.(-^o^-)
Abrazotes!!!

romero1778

hola ustedes me pueden ayudar hacer un scroll bar para unos texto eske no encuentro la manera de hacerlo y keria saber si me podian ayudar ya ke encontre esta pagina bueno espero respuesta gracias

Publicar un comentario en la entrada

(-^o^-) (^_-) (#^_^#) (ÖoÖ) (*^o^*) (>_<) ( ̄へ ̄)(;_・) (ô_Ó) (O_O) (ˇ~ˇ) (ToT)(Q____Q) ಠ_ಠ (。◕‿◕) [(--)]ZZzzz

- Si el comentario es anónimo hay muchas posibilidades que no se publique.

 


UP