Saltar al contenido

cómo dividir un div en 2 columnas en el ejemplo de código html

Ejemplo 1: diseño de dos columnas html css

DOCTYPEhtml><html><head><metaname="viewport"content="width=device-width, initial-scale=1"/><style>bodyfont-family: Arial;color:white;.left,.rightheight:50%;width:50%;position: fixed;overflow-x: hidden;padding-top:20px;.leftleft:0;background-color:rgb(36,0,95);.rightright:0;background-color:rgb(56,1,44);.centeredposition: absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align: center;.centered imgwidth:150px;border-radius:50%;style>head><body><h1style="color:black;">Two column layout grid exampleh1><divclass="left"><h1>Some random text on the lefth1>div><divclass="right"><h1>Some random text on the righth1>div>body>html>

Ejemplo 2: cómo hacer una lista de dos columnas en html

<code>ul
  width:760px;
  margin-bottom:20px;
  overflow:hidden;
  border-top:1px solid #ccc;

li
  line-height:1.5em;
  border-bottom:1px solid #ccc;
  float:left;
  display:inline;

#double li   width:50%; <spanclass="code-comment">/* 2 col */span>
#triple li   width:33.333%;  <spanclass="code-comment">/* 3 col */span>
#quad li     width:25%;  <spanclass="code-comment">/* 4 col */span>
#six li      width:16.666%;  <spanclass="code-comment">/* 6 col */span>code>

valoraciones y comentarios

Si haces scroll puedes encontrar las anotaciones de otros usuarios, tú todavía tienes la habilidad mostrar el tuyo si lo deseas.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *