如何使文章和文章在一个部分中水平显示 [英] How to make article and aside display the same horizontally with in a section

问题描述

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

Here's the output for the first css, but it is wrong because there is still space on the left side.

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

Here's my second output, i just change my float:left; to float:right of section#usercontent article and it is almost correct but the article side was on the right side (must be on left) and the aside was on the left side (must be on right) i try also putting float on the section#usercontent aside but it just gotten worst and for the many times i tried this is the closest. Need any suggestions that can fix this issue thank you so much! :)

推荐答案

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

我将您的usercontent部分的宽度更改为600px.该部分的宽度不足以容纳本文和其他内容.将文章浮动在左边，右边放在一边，别忘了用clear:both清除浮动.(我已经在jsfiddle中为您添加了).如果您的usercontent-width是固定的，则使文章或旁边的内容变小.

I changed the width of your usercontent section to 600px. The width of that section wasn't big enough for the article and the aside. Float the article left, the aside on the right and don't forget to clear your floats with clear:both. (I've added that for you already in the jsfiddle). If your usercontent-width is fixed, make the article or aside a bit smaller.

这篇关于如何使文章和文章在一个部分中水平显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！