1

El contenido en firefox se alinea a la derecha pero en chrome y en edge no me estaría funcionando

.grupocentrorigth{
    float: right;
    width: 40%;
    height: 700px;
    /* background-color: #48693b; */
}

.contenidosright{
    margin-bottom: 1%;
    /* background-color: antiquewhite; */
}

.rigthfacebook{
    display: flex;
    justify-content: right;
}
<div class="grupocentrorigth" >
                    <div class="rigthfacebook contenidosright">
                        
                            <div class="fb-page"><a href="#">Link</a></blockquote></div>
                    </div>
                    
                    <div class=" contenidosright" >
                        <p>
                            Pellentesque placerat purus dui, vitae volutpat erat tincidunt non.
                            Pellentesque finibus sollicitudin arcu ac condimentum.
                            Phasellus sit amet lacus nec nisi viverra scelerisque. Quisque iaculis a purus fermentum iaculis.
                            Suspendisse urna leo, pulvinar accumsan dignissim at, auctor nec nulla.
                            In dignissim nulla quis mauris placerat pharetra. Etiam a quam vel mi convallis faucibus.
                            Sed convallis, ante sed consectetur sodales, tellus lacus semper sapien, at blandit turpis justo vel purus.
                        </p>
                        
                    </div>
                    
                </div>

EDGE

CHROME

MOZILLA ES EL RESULTADO DESEADO

DETALLE DEL MAQUETADO

3
  • El resultado que quiero obtener es el mostrado por mozilla. Agregué las fotos para que se pueda ver Commented el 22 may. 2020 a las 1:31
  • Agrego otra foto con colores de fondo en las cajas para que vean la disposición. Muchas gracias Commented el 22 may. 2020 a las 1:57
  • Informarte que justify-content: right; no existe en flexbox.
    – Shassain
    Commented el 22 may. 2020 a las 2:35

1 respuesta 1

0

comento lo siguiente:

  • Noto que tratas de obtener un resultado de 3 columnas, lo digo por que veo un espacio en blanco entre la columna de texto y la zona de las redes sociales
  • Para este caso considero que si ya estás usando flexbox entonces no tiene caso estar aplicando el float
  • Mas allá de eso considero que te sería mas conveniente aplicar una rejilla de 3 columnas para conseguir el resultado deseado

Entonces:

  • Tendremos una sección principal con una distribución de tipo grid
  • Estableceremos una división uniforme de 3 columnas
  • Como originalmente solo tenemos contenido para 2, entonces podemos trabajar con las grid areas e indicar las áreas que nuestra rejilla va a tener
    • En este paso vinculamos el nombre que le damos al grid-area en el contenedor padre o grid-container con la clase que le damos a la etiqueta HTML que deseamos acomodar, que mas o menos se vería así:

Estructura

grid-template-areas: "identificador";

.nombre-clase {
    grid-area: identificador;
}

Ejemplo

    <style>
      :root {
        --borde-identificador: 1px solid crimson;
      }
      .section {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-areas: "descripcion vacio social";
        border: 1px solid;
        padding: 5px; /*para distinguir el borde del contenedor padre*/
      } 
      .descripcion {
        grid-area: descripcion;/*nombre del grid-area*/
        border: var(--borde-identificador);
      }
      .vacio {
        grid-area: vacio; /*nombre del grid-area*/
        border: var(--borde-identificador);
      }
      .social {
        grid-area: social; /*nombre del grid-area*/
        border: var(--borde-identificador);
      }
    </style>
    <div class="section">
      <div class="descripcion">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor aut similique autem quae, molestias consectetur assumenda dolorem atque vel alias aliquam saepe, nemo in quo sequi sunt. Ea, veniam odit.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor aut similique autem quae, molestias consectetur assumenda dolorem atque vel alias aliquam saepe, nemo in quo sequi sunt. Ea, veniam odit.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor aut similique autem quae, molestias consectetur assumenda dolorem atque vel alias aliquam saepe, nemo in quo sequi sunt. Ea, veniam odit.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor aut similique autem quae, molestias consectetur assumenda dolorem atque vel alias aliquam saepe, nemo in quo sequi sunt. Ea, veniam odit.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor aut similique autem quae, molestias consectetur assumenda dolorem atque vel alias aliquam saepe, nemo in quo sequi sunt. Ea, veniam odit.vLorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor aut similique autem quae, molestias consectetur assumenda dolorem atque vel alias aliquam saepe, nemo in quo sequi sunt. Ea, veniam odit.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor aut similique autem quae, molestias consectetur assumenda dolorem atque vel alias aliquam saepe, nemo in quo sequi sunt. Ea, veniam odit.v
        
      </div>
      <div class="vacio">
        
      </div>
      <div class="social">
        Aquí los enlaces a Facebook
      </div>
    </div>

2
  • Entiendo, aunque no exista la columna central en la grilla si existe. Gracias por la colaboración me ha ayudado mucho, si bien luego tuve que hacer una caja dentro y aplicarle un display:flex y una justificacion a la derecha tu colaboración fue de mucha ayuda Commented el 22 may. 2020 a las 18:38
  • @MarceloPírez considera publicar entonces tu solución
    – user128299
    Commented el 22 may. 2020 a las 18:41

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.