0

tengo un problema con un trabajo que estoy realizando, quiero realizar unas figuras a base de DIVS la primera linea o se podria llamar la parte de arriba de la figura la he podido realizar el problema es que al momento de realizar la parte de abajo o la linea que esta por debajo de la primera los divs de mi primera linea se juntan con los de la primera a pesar de que les agrego un margin-top y un margin-left soy principiante en web asi que no conozco muchos trucos, les agradezco de antemano.

Este es mi HTML Esta es mi HTML Este mi CSS

introducir la descripción de la imagen aquí

Y Asi es como se visualiza introducir la descripción de la imagen aquí

Y lo que requiero es que no se junte con los divs de arriba

#uno {
  margin-left: 800px;
}

#dos {
  margin-right: 100px;
}

.gorra {
  width: 50px;
  height: 50px;
  background-color: red;
  float: left;
}

.gorra1 {
  width: 50px;
  height: 50px;
  background-color: red;
  float: left;
  margin-top: 50px;
}
<!DOCTYPE html>
<html>
<body>
  <div id="uno">
    <div class="gorra"></div>
    <div class="gorra"></div>
    <div class="gorra"></div>
    <div class="gorra"></div>
    <div class="gorra"></div>
  </div>

  <div id="dos">
    <div class="gorra1"></div>
    <div class="gorra1"></div>
    <div class="gorra1"></div>
    <div class="gorra1"></div>
    <div class="gorra1"></div>
    <div class="gorra1"></div>
    <div class="gorra1"></div>
    <div class="gorra1"></div>
    <div class="gorra1"></div>
  </div>
</body>
</html>

4
  • ¿Podrías añadir a tu pregunta una imagen ilustrativa de el resultado que esperas obtener? Commented el 4 sept. 2018 a las 2:20
  • Creo que sería de mucha utilidad que publicaras un enlace de codepen para poder ayudarte.
    – akko
    Commented el 4 sept. 2018 a las 2:26
  • A no ser que lo haya copiado mal, me da que lo que se genera con el código que has puesto no coincide con la foto que has mandado Commented el 4 sept. 2018 a las 7:48
  • Que tal Armando antes que nada debes revisar y leer la documentación de como funciona CSS y la etiqueta "float" es la que esta dispersando mal tus divs puedes revisar el link developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/… y pues no hay trucos son reglas de diseño.
    – frank_ivan
    Commented el 4 sept. 2018 a las 19:03

1 respuesta 1

1

El problema que estás teniendo se debe a que has usado float: left; sin seguirlo por un clear: both. Cuando usas float, los divs salen del flujo normal de la página, y su contenedor suele dejar de ocupar espacio. Si agregas un clear después de los divs con float, su contenedor volverá a ocupar el espacio que corresponde, y los márgenes se aplicarán.

Abajo ves dos ejemplos de cómo puedes implementarlo:

Via pseudoelemento:

#uno:after {
  content: ""; 
  display: block;
  clear: both; 
}

Esto crea un pseudo elemento a quien aplicar el clear. Tiene a su favor que no tendrás un div vacío para confundir.

Via div vacio

Al final de #dos, agregas:

<div class="clear"></div>

Y en el css:

.clear {clear: both;}

#uno {
  margin-left: 800px;
}
#uno:after {
  content: ""; 
  display: block;
  clear: both; 
}
#dos {
  margin-right: 100px;
}

.gorra {
  width: 50px;
  height: 50px;
  background-color: red;
  float: left;
}

.gorra1 {
  width: 50px;
  height: 50px;
  background-color: red;
  float: left;
  margin-top: 50px;
}
   .clear {clear: both; }
<!DOCTYPE html>
<html>
<body>
  <div id="uno">
    <div class="gorra"></div>
    <div class="gorra"></div>
    <div class="gorra"></div>
    <div class="gorra"></div>
    <div class="gorra"></div>
  </div>

  <div id="dos">
    <div class="gorra1"></div>
    <div class="gorra1"></div>
    <div class="gorra1"></div>
    <div class="gorra1"></div>
    <div class="gorra1"></div>
    <div class="gorra1"></div>
    <div class="gorra1"></div>
    <div class="gorra1"></div>
    <div class="gorra1"></div>
    <div class="clear"></div>
  </div>
</body>
</html>

Para quienes miren este snippet, les recomiendo que lo vean en pantalla completa.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.