posicionar en linea – css

Pregunta:


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>
Preguntado por: hubman

Santiago Roldan

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>

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>

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>

Fuente

Tags:

Add a Comment

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *