Soy un principiante y, como es el caso de la mayoría de los principiantes, estoy luchando con algo que creo que debería ser más simple de lo que es para mí en este momento.

Como parte de mi tarea, debo crear un diseño para una entrada de blog, en el que la fecha y el autor se representen en la columna de la izquierda (roundel-container en el código a continuación), mientras que el contenido en sí ( articlebody) y el pie de página con el botón "leer más" y los enlaces a los comentarios (readmore-footer) formarían la segunda columna más ancha a la derecha. Esta imagen representa una visión simplificada de lo que quiero lograr.

He estado jugando con position:, left:, right: y float:, pero con resultados mediocres (que bien podría deberse a la falta de práctica). Así es como se ve el código ahora:

Html

<section class="articlebox">
    <section class="roundel-container">
        <div class="roundel left"><span class="bold">11 Nov 2013</span></div>
        <div class="roundel left"><span class="bold">by John Doe</span></div>
    </section>
    <section class="articlebody">
        <p class="readable">Lorem ipsum ...</p>
    </section>
    <footer id="readmore-footer">
        <div class="button bold white" id="readmore-button">Read More</div>
        <section class="right">
            <p><a class="darkblue">10 likes</a> <a class="darkblue">22 comments</a></p>
        </section>
    </footer>
</section>

Css

.articlebody {
    position: relative;
    left: 0;
    padding: 0px 15px 10px 15px;
}

.articlebox {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.roundel {
    height: 80px;
    width: 80px;
    border-radius: 40px;
    margin: 10px;
    color: white;
    background-color: #22aaec;
    display: flex;              
    flex-direction: column;     
    justify-content: center;
    text-align: center;    
    align-items: center;
}

.roundel-container {
    position: relative;
    left: 0;
    min-width: 220px;
}

#readmore-footer {
    margin-top: 25px;
    position: relative;
    left: 0;
}

.left {
    float: left;
    width: 45%;
}

.button {
    padding: 5px 15px;
    margin-left: 12px;
    margin-right: 12px;
}

.right {
    float: right;
    width: 45%;
}

Le agradecería ayuda con este, así como cualquier consejo y truco que pueda dar con respecto a lo anterior. ¡Gracias!

0
Michał Pietrusiński 14 nov. 2017 a las 21:42

2 respuestas

La mejor respuesta

Recientemente comencé a combinar todas las cosas para lograr diseños como el que solicitas. Lea este artículo, le ayudará a obtener la estructura que está buscando. Intento evitar el uso de flotadores cuando sea posible.

http://markheath.net/post/simple-css-blog-layout-flexbox

0
MDeB 14 nov. 2017 a las 18:52

Escribe tu código así:

 <!DOCTYPE html>
    <html>
    <head>
    <style>
    div.container {
        width: 100%;
        border: 1px solid gray;
    }
    
    header, footer {
        padding: 1em;
       	border-top: 1px solid black;
        clear: left;   
    }
    
    nav {
        float: left;
        max-width: 160px;
        margin: 0;
        padding: 1em;
    }
    
    nav ul {
        list-style-type: none;
        padding: 0;
    }
       
    nav ul a {
        text-decoration: none;
    }
    
    article {
        margin-left: 170px;
        border-left: 1px solid gray;
        
        overflow: hidden;
    }
    </style>
    </head>
    <body>
    <div class="container">  
    <nav>
      <p>roundel container</p>
    </nav>
    <article>
      <p>article body</p>
      <footer>readmore footer</footer>
    </article>
    </div>
    </body>
    </html>

Nota: esto es solo una demostración que le dará una idea. Espero que te ayude. ¡Salud!

2
Ankit Singh 14 nov. 2017 a las 19:05