Por qué el div “blogs-news-info-container” se ubica en la fila 2? La indicación es que se ubique en la columna 2 pero no hay nada directo...

Luis Gerardo Colmenares

Luis Gerardo Colmenares

Pregunta
studenthace 5 años

Por qué el div “blogs-news-info-container” se ubica en la fila 2? La indicación es que se ubique en la columna 2 pero no hay nada directo que le diga que se posicione en esa fila. Por qué no se posiciona en la fila 1 de la columna 2?

1 respuestas
para escribir tu comentario
    Carlos Gutierrez [C6]

    Carlos Gutierrez [C6]

    studenthace 5 años

    Tiene que ver en como estan acomodados en el HTML, tienes 3 elementos que es el

    titulo
    , la
    ìmagen
    y el
    texto
    .

    En el CSS el

    titulo
    , la
    ìmagen
    ocupan la misma columna por lo que en automatico se posicionan en forma vertical y de ahi CSS sabe que el
    texto
    que esta en la columna 2 debe ir en la fila 2 porque este es el ultimo elemento

    Codigo 1 con el elemento
    texto
    antes que la
    ìmagen

    1.JPG

    <section class="blogs-news-container"> <div class="blogs-main-new"> <h3>Noticias</h3> <div class="blogs-news-info-container"> <h2>What is Lorem Ipsum?</h2> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p> <a href="" class="blogs-button">Leer mas</a> </div> <div class="blogs-news-img-container"> <img src="" alt=""> </div> </div> </section>

    Codigo 2 con el elemento
    texto
    despues que la
    ìmagen

    2.JPG

    <section class="blogs-news-container"> <div class="blogs-main-new"> <h3>Noticias</h3> <div class="blogs-news-img-container"> <img src="" alt=""> </div> <div class="blogs-news-info-container"> <h2>What is Lorem Ipsum?</h2> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p> <a href="" class="blogs-button">Leer mas</a> </div> </div> </section>
Curso de Maquetación en CSS [Empieza Gratis]

Curso de Maquetación en CSS [Empieza Gratis]

Construye un blog personal con CSS, usando Grid y técnicas de maquetación. Aprende a organizar tu proyecto con clases específicas, incluye herramientas como Chrome DevTools para depurar, y haz que tu sitio sea responsive con media queries.

Curso de Maquetación en CSS [Empieza Gratis]
Curso de Maquetación en CSS [Empieza Gratis]

Curso de Maquetación en CSS [Empieza Gratis]

Construye un blog personal con CSS, usando Grid y técnicas de maquetación. Aprende a organizar tu proyecto con clases específicas, incluye herramientas como Chrome DevTools para depurar, y haz que tu sitio sea responsive con media queries.