Alinear elementos <div> uno al lado del otro

127

Sé que esta es una pregunta bastante simple, pero no puedo resolverla por mi vida. Tengo dos enlaces a los que he aplicado una imagen de fondo. Así es como se ve actualmente (disculpas por la sombra, solo un boceto de un botón):

ingrese la descripción de la imagen aquí

Sin embargo, quiero que esos dos botones estén uno al lado del otro. Realmente no puedo entender qué hay que hacer con la alineación.

Aquí está el HTML

<div id="dB"}>
    <a href="http://notareallink.com" title="Download" id="buyButton">Download</a> 
</div>
<div id="gB">
    <a href="#" title="Gallery" onclick="$j('#galleryDiv').toggle('slow');return false;" id="galleryButton">Gallery</a>     
</div>

Aquí está el CSS

#buyButton {
    background: url("assets/buy.png") 0 0 no-repeat;
    display:block;
    height:80px;
    width:232px;
     text-indent:-9999px;
}
#buyButton:hover{
width: 232px;
height: 80px;
background-position: -232px 0;
}
#buyButton:active {
width: 232px;
height: 80px;
background-position: -464px 0;
}

#galleryButton {
    background: url("images/galleryButton.png") 0 0 no-repeat;
    display:block;
    height:80px;
    width:230px;
     text-indent:-9999px;
}
#galleryButton:hover{
width: 230px;
height: 80px;
background-position: -230px 0;
}
#galleryButton:active {
width: 230px;
height: 80px;
background-position: -460px 0;
}
css html alignment sudo rm -rf
fuente
55
Lo primero que viene a la mente con solo leer el título esfloat:left;
JCOC611
2
@ JCOC611: la aplicación float:left;a ambos divs lo hizo perfectamente. ¿Puedes publicar tu comentario como respuesta? ¡Gracias!
sudo rm -rf
1
Y el segundo es, display: inline-block;pero es menos compatible ...
JV
1
flotante: dejarlo dentro de un contenedor funcionaría, pero intentaría usar dos etiquetas <span> en lugar de <div> s para los botones.
shiftycow
Como ya se mencionó, agregando flotante: izquierda; a #buyButton y #galleryButton, luego agregue otro elemento con clear: ambos; para despejar el flotador. ¿Por qué usar divs (elementos de bloque) para ajustar <a>?
ludesign

Respuestas:

154

Aplicar float:left;a ambos divs debe hacer que se paren uno al lado del otro.

JCOC611
fuente
¿Estoy equivocado o es clear:both;necesario ir a algún lado? Nunca he sido un experto en CSS, pero parece típico cuando veo flotadores para ver claros también.
Brad Christie
44
clear:bothhará exactamente lo contrario. "Los elementos después del elemento flotante fluirán a su alrededor. Para evitar esto, use la propiedad clear".
JCOC611
@ JCOC611: Ah, ¿tan claro generalmente sigue cuando quieres una habilidad flotante momentánea? Tiene sentido. Gracias por la leccion. ;-)
Brad Christie
77
Para ser "claro" (horrible, lo sé), necesitarías usarlo <br style="clear: both;" />si tuvieras un tercer div que quisieras debajo de los dos alineados.
Tass
3
@Tass solo necesita tener su tercer div de esta manera: <div style="clear: both;">...</div>(no se requiere br)
intrepidis
136

Cuidado float: left... 🤔

... hay muchas formas de alinear elementos uno al lado del otro.

A continuación se presentan las formas más comunes de lograr dos elementos uno al lado del otro ...

Demostración: vea / edite todos los ejemplos a continuación en Codepen

Estilos básicos para todos los ejemplos a continuación ...

Algunos estilos básicos de CSS parenty childelementos en estos ejemplos:

.parent {
  background: mediumpurple;
  padding: 1rem;
}
.child {
  border: 1px solid indigo;
  padding: 1rem;
}

flotador izquierdo

El uso de la floatsolución puede tener un efecto no deseado en otros elementos. (Sugerencia: es posible que deba usar una solución clara ).

html

<div class='parent'>
  <div class='child float-left-child'>A</div>
  <div class='child float-left-child'>B</div>
</div>

css

.float-left-child {
  float: left;
}

pantalla: bloque en línea

html

<div class='parent'>
  <div class='child inline-block-child'>A</div>
  <div class='child inline-block-child'>B</div>
</div>

css

.inline-block-child {
  display: inline-block;
}

Nota : el espacio entre estos dos elementos secundarios se puede eliminar eliminando el espacio entre las etiquetas div:

pantalla: bloque en línea (sin espacio)

html

<div class='parent'>
  <div class='child inline-block-child'>A</div><div class='child inline-block-child'>B</div>
</div>

css

.inline-block-child {
  display: inline-block;
}

pantalla: flex

html

<div class='parent flex-parent'>
  <div class='child flex-child'>A</div>
  <div class='child flex-child'>B</div>
</div>

css

.flex-parent {
  display: flex;
}
.flex-child {
  flex: 1;
}

pantalla: flex en línea

html

<div class='parent inline-flex-parent'>
  <div class='child'>A</div>
  <div class='child'>B</div>
</div>

css

.inline-flex-parent {
  display: inline-flex;
}

pantalla: cuadrícula

html

<div class='parent grid-parent'>
  <div class='child'>A</div>
  <div class='child'>B</div>
</div>

css

.grid-parent {
  display: grid;
  grid-template-columns: 1fr 1fr
}
Beau Smith
fuente
2
Sí, pero escuché que usar inline-blocktiene algunos problemas de compatibilidad. Además, ¿alguna ventaja de usar eso float?
sudo rm -rf
1
Sí, inline-blockes más nuevo, por lo tanto , es posible que sus navegadores de destino aún no lo admitan (aunque hay muchas propiedades específicas del navegador y también soluciones alternativas para esto). La ventaja es que el elemento contenedor envolverá los elementos; con floattendrás que agregar css al elemento padre.
Beau Smith,
12

mantenlo simple

<div align="center">
<div style="display: inline-block"> <img src="img1.png"> </div>
<div style="display: inline-block"> <img src="img2.png"> </div>
</div>
Miguel Rão Vieira
fuente