Ver originales (Francés)

Colocar dos bloques div uno al lado del otro

vounce Mensajes publicados 8 Estado Miembro -  
animostab Mensajes publicados 3003 Fecha de registro   Estado Miembro Última intervención   -
```html Hola,

Soy estudiante de Webmaster (principiante) y tengo un problema con uno de mis deberes. El objetivo es colocar dos bloques uno al lado del otro. Estoy logrando que el bloque de la derecha se desplace ligeramente hacia abajo en comparación con el de la izquierda.
Gracias por su ayuda, y aquí está mi trabajo:
HTML

<body>
<div id="bloc_1">
<div id="bloc_2">Bloque 2</div>
</body>

CSS

#bloc_1 {
width:250px;
height:250px;
position:relative;
top:200px;
left:300px;
background-color: green;
border:5px #000 solid;
text-align:center;
}

#bloc_2 {
float:right;
margin:0;
width:250px;
height:250px;
position:absolute;
top:0px;
left:400px;
background-color: green;
border:5px #000 solid;
text-align:center; ```

1 respuesta

  1. Rajo
     
    Hola,

    Debe cerrar su primer div (¿fue un olvido de copiar y pegar?).

    Después, para posicionar 2 elementos hay numerosas métodos. Basta con utilizar solo uno y ahí están intentando usar varios a la vez, lo cual es un poco contradictorio.

    Primero quiten su posición relativa (¿en el primer div? ¿es relativo a qué?) y el segundo lo ponen en absolute, por lo tanto no tiene en cuenta el otro div que lo precede.
    Sin embargo, muchos métodos de posicionamiento se basan en posicionar un elemento en relación a otro (por ejemplo, con float) en el orden de su aparición, por lo que se posiciona el segundo en relación al primero (mientras que aquí intentan hacer lo contrario). Si ponen absolute, el posicionamiento se hace en relación a.. les dejo re-leer su curso.

    Además, tienen esto también:
    http://www.alsacreations.com/article/lire/533-initiation-au-positionnement-en-css.html
    2
    1. Rajo
       
      y como soy simpático un ejemplo de posicionamiento con CSS:

      .bloc_gauche.div{
      float:left; <!----- POSICIONAMIENTO FLOTA A LA IZQUIERDA (en relación al siguiente elemento)-->
      }
      .bloc_droite.div{
      float:right;<!----- POSICIONAMIENTO FLOTA A LA DERECHA (en relación al elemento anterior)-->
      }

      No olvides que float se debe usar con moderación, el 'flotamiento' de las etiquetas indica que salen del flujo, a veces es necesario restablecer el flujo (orden natural de los elementos) indicando con un elemento que seguirá la propiedad css clear:both; como una etiqueta de salto de línea:

      <br style='clear:both;' />

      *nota también que bloc_gauche y bloc_droite son ya más representativos que bloc-1 bloc-2, imagina que tienes 50 ¿cómo reconocerás a qué corresponde bloc_37? Imposible, mientras que escribiendo explícitamente a qué corresponde, ayudará.

      *he utilizado una clase en lugar de un id porque si quieres reutilizar tus clases puedes hacerlo (a diferencia del id que es único, como sabes).
      el .div de bloc_gauche.div no es obligatorio, pero al incluirlo obliga a utilizar la clase solo para un div (en general, estos son los div (de dividir) que se utilizan para eso, siendo span el equivalente pero solo para un elemento de texto (por lo tanto, en una etiqueta de texto).
      0
    2. animostab Mensajes publicados 3003 Fecha de registro   Estado Miembro Última intervención   738
       
      Hay algo mejor aún
      en lugar de usar 2 div con diferentes id, utiliza 2 div con la misma clase

      <div class="div1></div>
      <div class="div1></div>


      el css

      .div1 {
      width:200px;
      height:200px;
      display:inline-block;
      border: 5px solid black;
      background-color: green;
      text-align:center;
      }

      lo único es que inline-block crea un espacio entre los 2 div llamado white-space, pero una pequeña búsqueda te dará algunas trucos para resolver el problema del white space.
      también puedes hacer el width en porcentaje para hacerlo responsive.
      0