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

Related Posts:

¿Como eliminar espacio en los bordes con bootstrap? – html css bootstrap
Pregunta: Estoy intentando hacer un login con bootstrap y me surgió un problema con los bordes, cuando intento insertar un borde en el formulario se ...
Estilar un pseudoelemento ::after con jQuery – javascript jquery html
Pregunta: ¿Cómo seleccionar desde jQuery un elemento de este estilo? .page-container .single-page:nth-of-type(2)::after { } La idea es poder modificar ciertas reglas CSS desde JavaScript. ...
Quitar parpadeo de animation timing function – javascript html css
Pregunta: tenia una duda. Quería conseguir que el fondo de mi web cambiara usando keyframes. Por ello usé animation-timing-function: step-start;. El problema es que sí ...
HTML/CSS renderizado de manera extraña – html css less
Pregunta: Tengo un problema con el renderizado HTML/CSS. Cómo es posible que de éste código: <div class="gal-preview"> <div class="thumbnail"> ...
¿Como puedo alinear verticalmente un contenido de un div con bootstrap 3? – html css bootstrap
Pregunta: Si observan el ejemplo en una resolución de 1024p podrán observar como el texto del label se extiende y el select pegado a la ...
Alineación vertical central con CSS – html css
Pregunta: Pregunta Tengo una etiqueta div que contiene text. Quireo que el contenido de este dive se alinee verticalmente al centro. ¿Cómo puedo lograrlo? Fragmento #box { height: ...
¿Cómo colocar cajas del mismo tamaño? Tengo un problema – html css flexbox
Pregunta: Buenas, estoy creando una página web en html y css, pero me topé con un problema: Resulta que en la sección de trabajos quiero que ...
Poner elementos de html una debajo de otro – html5 css
Pregunta: Hola mi estructura html sería: .navbar { background-color: #62ADD6; font-size: 15px; border: 0; position: fixed; height: 80px; } #pie { ...
¿Cómo eliminar el espacio entre este header y el nav? – html html5 css
Pregunta: Buenas tardes. Estoy empezando en esto de la programación web con HTML5 y CSS3 y próximamente JS, y al hacer un intento de página web, ...
Modal no aparece completo – css bootstrap modal
Pregunta: Así aparece mi Modal: Necesito que me aparezca completo y se superponga por delante de todo. Este es mi código: <div class="row"> ...
Ocultar en bootstrap 4 – css bootstrap-4
Pregunta: Estoy intentando ocultar un texto de la siguiente manera <ul class="col-6 col-lg-4"> <li> <i class="fa fa-briefcase" ...
Centrar botón de búsqueda – html html5 css
Pregunta: Con la aplicación web ya terminada solo falta el CSS, y aquí estoy teniendo problemas. Tengo el siguiente botón: <div class="SearchDiv"> <form id="searchForm" action="SearchController" method="post"> <input type="text" name="searchQuery" ...
Estilo CSS no me funciona en Chrome – css
Pregunta: Amigos, tengo un estilo que no me funciona en Chrome, pero sí en Firefox. Es un estilo para agrandar un poco más el option ...
¿Por qué Google Chrome malinterpreta la regla @media screen orientation en dispositivos móviles? – android html css
Pregunta: La pregunta puede ser un tanto confusa, pues bien, me voy a explicar un poco. Resulta que estaba creando un formulario, el cual tenía determinados ...
¿Cómo poner un texto en un efecto partículas? – jquery css particles
Pregunta: Tengo el siguiente problema, el cual realizo el efecto partículas/matrix, pero me gustaría posicionar un texto arriba del efecto. Intenté agregarlo y darle un ...
Tags:

Add a Comment

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