Alineando DIVs en reemplazo de Tablas

Kuroro1990 · 3 Ene 2015

Hola amigos de forobeta

Recurro a ustedes para ver si me pueden ayudar con unas tablas que quiero cambiar.

Tenia una tabla <table> en varios post en los cuales agrego diferentes datos (texto, imagenes y listas), pero he leído tanto que ya no se usan las tablas, que he intentado crear unas nuevas con DIVs y la verdad que no he logrado realizarlas.

Este es la estructura que tenia anteriormente en las tablas, que eran más o menos responsive.

Lo que quiero ahora es realizar este nuevo diseño pero con DIVs (y css), pero que además en la tercera fila (f 3) pueda ser con una celda o dos como en la imagen o incluso tres, y que sean proporcionales.

Y es aquí el problema, ya que, no sé cómo alinear los div en la misma fila. Si alguien me pudiera ayudar con el html y css básico para esto le estaría muy agradecido.

Lenny Creative · 3 Ene 2015

nos podrias adjuntar el css y html q has avanzado y darle una mirada

rayden · 3 Ene 2015

Lo que te combiene es usar grid css

por ejemplo

CSS Â· Bootstrap

demo
Grid Template for Bootstrap

demo
960 Grid System â€” Demo

960 Grid System

kanikase · 3 Ene 2015

HTML:

<div id="tabla">
<div class="row row-100"></div>
<div class="row row-100"></div>
<div class="row row-50"></div>
<div class="row row-50"></div>
<div class="row row-100"></div>
</div>

Insertar CODE, HTML o PHP:

#tabla {
width: 500px;
}
.row {
padding: 5px;
border:1px solid DDD;
}
.row-100 {
width: 100%;
}
.row-50 {
display: inline-block;
width: 50%;
}

Yo haría eso :encouragement:

Kuroro1990 · 4 Ene 2015

kanikase dijo:

HTML:

<div id="tabla">
<div class="row row-100"></div>
<div class="row row-100"></div>
<div class="row row-50"></div>
<div class="row row-50"></div>
<div class="row row-100"></div>
</div>

Insertar CODE, HTML o PHP:

#tabla {
width: 500px;
}
.row {
padding: 5px;
border:1px solid DDD;
}
.row-100 {
width: 100%;
}
.row-50 {
display: inline-block;
width: 50%;
}

Yo haría eso :encouragement:

Agregue esto a la hoja de estilos y el html a una entrada y no se ve en el navegador.

Lenny Creative dijo:
nos podrias adjuntar el css y html q has avanzado y darle una mirada

Lo que pasa es que no tengo conocimientos de html y css, así que no creo que lo que haya hecho este bien ya que no funciona, no se ve para nada como lo que quiero lograr por eso no lo pongo.

Espero que alguien me pueda ayudar por favor :sorrow:

lombervid · 4 Ene 2015

Edit fiddle - JSFiddle

Delacroix · 15 Ene 2015

Tal ves sea un poco tarde pero aquí te adjunto una solución completamente responsive, solamente utilice css3 básico, ningún framework para que vayas entendiendo como estructurar una página te digo existen muchas maneras de desarrollar esa estructura de las tantas que pensé consideré que esta es la mejor. es mi opinión personal aquí te la adjunto.

HTML:

<html>
<head>
	<title></title>
	<style type="text/css">
		header, nav, footer {
			border: 1px solid red;
			height: 100px;
		}

		section.container {
			border: 1px solid green;
			padding: 10px 0 10px 0;
		}

		section.container:after {
			display: block;
			content: '';
			clear: both;
		}

		div.box {
			box-sizing: border-box;
			width: 50%;
			float: left;
			height: 100px;
			border: 1px solid blue;
			margin: 5px 0 5px 0;
		}


	</style>	
</head>
<body>
	<main>
		<header>
			<h2>Cabecera</h2>
		</header>
		<nav>
			<h2>Menu de Navegación</h2>
		</nav>
		<section class="container">
			<div class="box">a </div>
			<div class="box">b</div>
			<div class="box">c </div>
			<div class="box">d</div>
		</section>
		<footer>
			Pie de Página
		</footer>
	</main>	
</body>
</html>

Alineando DIVs en reemplazo de Tablas

Kuroro1990

Lenny Creative

rayden

kanikase

Kuroro1990

lombervid

Delacroix

Temas similares