Question

我是初学者，而且，就像大多数初学者一样，我觉得我觉得应该比现在更简单。

作为我的任务的一部分，我将为博客条目创建一个布局，其中日期和作者将在左侧列中表示（下面的代码中为roundel-container），而内容本身（articlebody）和页脚＆＃34;阅读更多＆＃34;按钮和评论链接（readmore-footer）将形成右侧第二个更宽的列。 This image represents a simplified vision of what I want to achieve。

我一直在玩position:，left:，right:和float:，但是对于平庸的结果（我可能完全归功于缺乏练习）。以下是代码的样子：

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%;
}

我非常感谢您对这一点的帮助，以及您可能提供的有关上述内容的任何提示和技巧。谢谢！

Answer 1

编写如下代码：

 <!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>

注意：这只是为您提供想法的演示。希望它能帮到你。干杯！

Answer 2

我最近开始使用flex-boxing所有的东西来实现布局，例如你要求的布局。阅读这篇文章，它应该可以帮助您获得所需的结构。我试图尽可能远离使用花车。

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

并排显示两个部分

2 个答案: