Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Emular margins laterales con un solo div

Estas en el tema de Emular margins laterales con un solo div en el foro de CSS en Foros del Web. Lo que estoy intentando con flex es emular "margin:auto;" pero usando un único DIV y que este ocupe todo el ancho con un color de ...
  #1 (permalink)  
Antiguo 09/12/2016, 08:55
 
Fecha de Ingreso: enero-2008
Mensajes: 580
Antigüedad: 16 años, 2 meses
Puntos: 9
Emular margins laterales con un solo div

Lo que estoy intentando con flex es emular "margin:auto;" pero usando un único DIV y que este ocupe todo el ancho con un color de fondo, y aprecio un margen de error que no consigo dominar

Código HTML:
<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		div.b{
			background:red;
			display:flex;
			justify-content:flex-start;
			align-items:stretch;
		}
		div.b:before{
			background:lime;
			content:"";
			width:calc((100% - 800px) / 2);
		}
		div.b:after{
			background:lime;
			content:"";
			width:calc((100% - 800px) / 2);
		}
	</style>
</head>
<body>
	<div class="b">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit dolor perspiciatis, nemo totam quis voluptatibus. Laudantium quos, nemo quis quo vitae, aperiam delectus tempore velit corporis enim accusamus ipsam consequatur!</div>
	<div style="background:lime;"><div style="width:800px;margin:auto;background:red">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis quia velit, eligendi incidunt nemo dolores quisquam cupiditate qui, facere facilis quae magni assumenda est voluptate autem laudantium sapiente voluptatibus amet.</div></div>
</body>
</html> 
  #2 (permalink)  
Antiguo 09/12/2016, 12:39
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 9.028
Antigüedad: 21 años
Puntos: 1826
Respuesta: Emular margins laterales con un solo div

Hum. Yo le pondría un padding al contenedor padre.
  #3 (permalink)  
Antiguo 09/12/2016, 14:54
 
Fecha de Ingreso: enero-2008
Mensajes: 580
Antigüedad: 16 años, 2 meses
Puntos: 9
Respuesta: Emular margins laterales con un solo div

Pues es más simple , gracias por la sujerencia

Código:
padding:0 calc((100% - 800px) / 2);

Etiquetas: html, margin, todo, width
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 04:55.