0

Quiero posicionar 2 elementos de tal forma que queden en linea, la estrutura es asi; Un elemento Div tiene dentro 2 divs; quiero poner el boton que tiene el logo de camara a la derecha, a un lado del texto, donde esta marcado con la palomita:

introducir la descripción de la imagen aquí

Esta es mi base: El color solido de la caja es solo para si esta posicionado..

 

<div style="border:solid;">

<div style="width:50%; display:inline-block; border:solid;">
 <span>
  <strong>Nombre evento</strong>
   Descripcion evento
  </span>
</div>
<div style="width:50%; display:inline-block; border:solid;">
 <span >
  <button style="border-radius:5px;"  ><i ></i>Boton</button>
 </span>
</div>
   </div>

3
  • 1
    al div padre que contiene esos dos divs que queres dividir añádele estos estilos display: flex; justify-content: space-between; align-items: center;
    – Roy
    Commented el 18 jun. 2021 a las 19:05
  • 1
    Hazlo como respuesta @Daniel
    – Excorpion
    Commented el 18 jun. 2021 a las 19:08
  • @Daniel se alineo justo como quería, muchas gracias, puedes ponerlo como respuesta :D
    – Jonathan G
    Commented el 18 jun. 2021 a las 19:10

1 respuesta 1

2

Yo usaría Flexbox para poder hacerlo mas rápido te muestro el código que implemente y te explico dentro de el para que sirven, por otro lado si te interesa aprender mas sobre Flexbox te dejo este Link

.contenedor-flexbox {
    display: flex; /*Convertimos al menú en flexbox*/
    justify-content: space-between; /*Con esto le indicamos que margine todos los items que se encuentra adentro hacia la derecha e izquierda*/
    align-items: center; /*con esto alineamos de manera vertical*/
}
<div class="contenedor-flexbox">
        <div style="width:50%; display:inline-block; border:solid;">
         <span>
          <strong>Nombre evento</strong>
           Descripcion evento
          </span>
        </div>
        <div style="width:50%; display:inline-block; border:solid;">
         <span >
          <button style="border-radius:5px;"  ><i ></i>Boton</button>
         </span>
        </div>
    </div>

pd: vi que estas usando los estilos de css dentro del html, te recomiendo que crees un archivo de css y que tengas ahí tus estilos separados y ordenados.

Espero ayudarte con esto, cualquier cosa me comentas, Suerte!

1
  • Muchas gracias, en efecto los estilos css los tengo por separado jeje y los llamo con clases, justo los adjunte a las clases :)
    – Jonathan G
    Commented el 18 jun. 2021 a las 19:19

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.