FORO DE ORIENTACIONES Y PREGUNTAS

Vistas: 9

Respuestas a esta discusión

He encontrado que HTML5 a permite usar la opción columna directamente con compatibilidad para diferentes navegadores, con esto no es necesario recurrir al uso de tablas, Podemos integrar la clase al CSS principal

.doscolumnas {
column-rule-color: silver;
column-rule: 1px solid #bbb;
-webkit-column-count:2;
-moz-column-count:2;
column-count:2;
}

y luego invocarlo así:
<p class="doscolumnas">Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos detexto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500</p>

Podemos usar el estilo combinado con párrafo normal para presentar imágenes. Si no teneís aún experiencia editando el css principal podeís integrar el estilo directamente en el párrafo así:

<p style="column-rule-color: silver;column-rule: 1px solid #bbb;-webkit-column-count:2; -moz-column-count:2;column-count:2;">

Siendo 2 la cantidad de columnas, y la opción column-rule-color: silver siendo silver el color del separador, si lo omitivos no dibujaría línea de separación.

EJEMPLO:

<div class="izquierda"><h1>¿Qué es el Internet de las Cosas?</h1>
<p class="doscolumnas"><img src="Imagenes/industry-iot.jpg" style="float:left; width:100%" border="0"/>
<br/><br/>
Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen.
</p>

<p>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen.<sup>1</sup></p>

<div class="footer"><hr class="notaspie" align="left"/>Imagen bajo licencia CC0 Creative Commons pixabay.com.<br/>
<br/>
<sup>2</sup> .
</div>

<h3>8</h3>
</div>

Archivos adjuntos:

RSS

© 2024   Creada por Juan Guillermo Rivera Berrío.   Con tecnología de

Insignias  |  Informar un problema  |  Términos de servicio