Home Foros Foro dudas Foro de CSS Problemas con Display

Problemas con Display

Etiquetado: 

  • Este debate tiene 1 respuesta, 2 mensajes y ha sido actualizado por última vez el hace 3 años, 10 meses por Anónimo.
Viendo 2 entradas - de la 1 a la 2 (de un total de 2)
  • Autor
    Entradas
  • #7259

    Oscar
    Participante

    Hola a todos. Necesito ayuda, a ver quién puede resolverme esta duda. Os paso un código HTML y CSS bastante sencillo y os explico:

    HTML

    <body>

    <header>Título</header>

    <nav>

    </nav>

    <section>

    <article>a</article>

    <article></article>

    <article></article>

    </section>

    <footer>

    </footer>

    </body>

    CSS

    header{

    width: 95%;

    border: 1px solid black;

    height: 50px;

    text-align: center;

    }

     

    nav{

    width: 95%;

    border: 1px solid black;

    height: 30px;

    }

     

    section{

     

    width: 95%;

    height: 1000px;

    border: 1px solid black;

    }

     

    article{

    padding: 5px;

    margin: 5px;

    width: 400px;

    height: 400px;

    border: 1px solid black;

    display: inline-block;

    }

    Si lo ejecutáis en vuestro navegador veréis cómo el ‘article’ que lleva la letra ‘a’ se desplaza hacia abajo. Mi intención es que eso no lo haga, que se quede dónde está. ¿Porqué me hace eso?

    Gracias !

    #7261

    Anónimo
    Inactivo

    Hi, como estas?
    Bueno mira si en los section pones algo como una letra – ahí no tendrás dramas – La razón por la cual pasa, he de suponer que porque esta vació.
    Por cierto en el CSS que te mando existe un inline-flex en vez de un block así adaptaras a los cambios en la dimensión de la ventana.
    Saludos !

    SCM

    HTML
    http://www.blogtrog.com/code.aspx?id=24cb6822-3f9b-47d6-b480-fed09b3592a4

    CSS
    http://www.blogtrog.com/code.aspx?id=bf9dd71a-6271-4a72-807e-ade9f2046b3c

     

Viendo 2 entradas - de la 1 a la 2 (de un total de 2)
  • Debes estar registrado para responder a este debate.