Pregunta Alinea elementos
uno al lado del otro


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

enter image description here

Sin embargo, quiero que esos dos botones estén uno al lado del otro. Realmente no puedo entender qué se debe 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;
}

75
2018-02-08 21:32


origen


Respuestas:


Aplicar float:left; a ambos divs debería hacerlos parados uno al lado del otro.


118
2018-02-08 21:41



Tener cuidado float: left...

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

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

Manifestación: Ver / editar todos los ejemplos a continuación en Codepen


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

Algunos estilos básicos de CSS para parent y child elementos en estos ejemplos:

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

float:left

Utilizando el float solución que tengo afecta involuntaria en otros elementos. (Sugerencia: es posible que deba usar un clearfix.)

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;
}

display:inline-block

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:

display:inline-block (no space)

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;
}

display: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;
}

display:inline-flex

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;
}


48
2018-02-09 02:29



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>

3
2018-02-21 21:22