html - 如何使文章和旁边在一个部分中水平显示相同

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 的输出，但它是错误的，因为左侧仍有空间。

这是我的第二个输出，我只是改变了我的 float:left; float :section#usercontent article 的右侧，这几乎是正确的，但是文章的一侧在右侧(必须在左侧)而 aside 在左侧(必须在右侧)我也尝试将 float 放在section#usercontent 放在一边，但它变得最糟糕，而且我尝试了很多次，这是最接近的。需要任何可以解决此问题的建议，非常感谢! :)

Answer 1

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

我将您的用户内容部分的宽度更改为 600 像素。该部分的宽度不足以容纳文章和旁白。将文章向左浮动，旁边向右浮动，不要忘记使用 clear:both 清除您的 float 。 (我已经在 jsfiddle 中为你添加了)。如果您的 usercontent-width 是固定的，请将文章或旁边的内容缩小一点。