1

Quiero posicionar en fila, pero no encima

.caja {
  display: inline-block;
}

.uno {
  width: 10px;
  height: 10px;
  background-color: red;
}

.dos {
  width: 10px;
  height: 10px;
  background-color: blue;
}
<div class="caja">
  <div class="uno">
  </div>

  <div class="dos">


  </div>
</div>

3 respuestas 3

3

Una solución moderna:

.flexbox {
  display: flex;
}

.div {
  width: 10px;
  height: 10px; 
}

.uno { 
  background-color: red;
}

.dos {
  background-color: blue;
}
<div class="flexbox">
  <div class="div uno"></div>
  <div class="div dos"></div>
</div>

1
  • Como no lo pensé antes jajaja fácil y rápido !! Commented el 6 dic. 2017 a las 16:24
3

Simplemente debes darle la propiedad display: inline-block; a los elementos que quieres posicionar uno al lado del otro y no a su elemento padre:

Nota: la propiedad vertical-align alinea verticalmente los elementos que contienen display: inline-block;

.uno {
  width: 10px;
  height: 10px;
  background-color: red;
  display: inline-block;
  vertical-align: middle;
}

.dos {
  width: 10px;
  height: 10px;
  background-color: blue;
  display: inline-block;
  vertical-align: middle;
  margin-left: -4px;
}
<div class="caja">
  <div class="uno">
  </div>

  <div class="dos">


  </div>
</div>

4
  • hay un espacio entre los 2 cuadrados, como los junto mas?
    – hubman
    Commented el 6 dic. 2017 a las 15:52
  • @hubman ok, debes tener en cuenta que los navegadores agregan ese espacio de forma predeterminada para los elementos que tienen display: inline-block;, para quitarlo podrías usar un margin-left con valor negativo en el segundo elemento, te he editado la respuesta ! Commented el 6 dic. 2017 a las 15:58
  • no existe vertical-align: center;... sería acaso middle pero aún así no lo necesitas... Commented el 6 dic. 2017 a las 16:15
  • 1
    oh que torpe fui @aldanux tienes razón confundí los valores de dos propiedades, editaré la respuesta ... no se necesitan en este ejemplo pero es bueno hacer énfasis en que existe la propiedad para que en el caso que tenga elementos de diferente altura no le genere un dolor de cabeza ubicarlos como desee Commented el 6 dic. 2017 a las 16:18
2

Debes quitar el inline-block del padre y puedes agregar la propiedad float: left; a los dos elementos para que flote uno al lado del otro.

.uno {
  width: 10px;
  height: 10px;
  background-color: red;
  float: left;
}

.dos {
  width: 10px;
  height: 10px;
  background-color: blue;
  float: left;
}
<div class="caja">
  <div class="uno">
  </div>

  <div class="dos">


  </div>
</div>

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.