如何制作文章，并在一个部分水平显示相同

Question

这是我的HTML代码

<section id="usercontent">
        <h1>Section - User Content</h1>
        <article>
        <h1>Article - Left Content</h1>

        </article>
        <aside>
        <h1>Aside - Right Content</h1>

        </aside>
    </section>

这是我的css代码

section#usercontent {
    border:1px solid black;
    width:598px;
}
section#usercontent article {
    height:100px;
    width:146px;
    float:left;
    border:1px solid black;
}
section#usercontent aside {
    height:100px;
    width:450px;
    border:1px solid black;
}

这是第一个css的输出，但它是错误的，因为左侧仍有空间。

这是我的第二个输出，我只是改变我的浮动：左;漂浮：部分#usercontent文章的右边，它几乎是正确的但文章方面是在右侧（必须在左侧）和旁边是在左侧（必须在右侧）我也尝试将浮动放在部分#usercontent除了它只是变得最糟糕，并且我尝试过很多次这是最接近的。需要任何可以解决这个问题的建议非常感谢你！ ：）

Answer 1

看看这个：http://jsfiddle.net/3m9fm/1/

我将usercontent部分的宽度更改为600px。该部分的宽度对于文章和旁边来说不够大。将文章漂浮在左边，在右边放置，不要忘记清除你的花车：两者。 （我已经在jsfiddle中为你添加了这个）。如果你的usercontent-width是固定的，那么把文章放在一边或稍微小一些。

Answer 2

CSS：

section#usercontent {
    border:1px solid black;
    width:600px;
}
.clear {
    clear: both;
    visibility: hidden;
}
section#usercontent article {
    height:100px;
    width:146px;
    float:left;
    border:1px solid black;
}
section#usercontent aside {
    height:100px;
    float: left;
    width:450px;
    border:1px solid black;
}​

HTML：

<section id="usercontent">
    <h1>Section - User Content</h1>
    <article>
    <h1>Article - Left Content</h1>

    </article>
    <aside>
    <h1>Aside - Right Content</h1>

    </aside>
<div class = "clear"></div>
</section>​​​​​​​​

我让它们都向左浮动，添加了一个“清除”div并调整宽度以适当地容纳列。这是你需要的吗？

Answer 3

<强> CSS

#usercontent
{
    border:1px solid black;
    width:598px;
}
#usercontent article
{
    height:100px;
    width:146px;
    float:left;
    border-color:black;
    border-style:solid;
    border-width:1px 1px 0 0;
}
#usercontent aside
{
    height:100px;
    width:450px;
    border-top:1px solid black;
    float:left;
}
.clearfix:after
{
    clear:both;
    content:'.';
    display:block;
    font-size:0;
    height:0;
    line-height:0;
    visibility:hidden
}
.clearfix
{
    display:block;
    zoom:1
}​

<强> HTML

<section id="usercontent" class="clearfix">
    <h1>Section - User Content</h1>
    <article>
        <h1>Article - Left Content</h1>
    </article>
    <aside>
        <h1>Aside - Right Content</h1>
    </aside>
</section>​​​​​​​​

<强> DEMO