📣 Seu anúncio aqui? Anuncie no ForoBeta

Alinhando DIVs em substituição de Tabelas

  • Autor Autor Kuroro1990
  • Data de início Data de início
Tradução em andamento: em alguns minutos este tópico estará em português. Por enquanto, o conteúdo está no original em espanhol. Ver original
K

Kuroro1990

Alfa
Usuário com poucas negociações! Use sempre o saldo do ForoBeta!
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.
tabla-html.webp

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.
tabla-div-css.webp

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.
 
Foi útil? Participe da conversa

Com sua conta grátis você pode responder, mandar mensagem privada ao autor e comprar com Saldo retido: o pagamento é liberado quando você recebe o combinado.

Continuar com o Google Criar conta com e-mail
Leva 30 segundos · você volta a este tópico ao terminar
nos podrias adjuntar el css y html q has avanzado y darle una mirada
 
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>

Inserir CODE, HTML ou 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:
 
kanikase disse:
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>

Inserir CODE, HTML ou 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:
Clique para expandir...

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

Lenny Creative disse:
nos podrias adjuntar el css y html q has avanzado y darle una mirada
Clique para expandir...
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:
 
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>
 
Você precisa estar logado ou cadastrado para responder aqui.

Tópicos similares

jose roman 1316
  • Trancado
Solicitado Convertir diseño en tablas por divs.
Respostas
2
Visitas
220
ZoroRoronoa
Z
L
Tabelas ou Divs em Templates WordPress para Melhorar o SEO?
Respostas
2
Visitas
865
krusty72
K
D
Inserir imagem por variável de substituição em títulos de post
Respostas
1
Visitas
777
Angel Srto
A
Voltar
Topo