2

これが私の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の出力ですが、左側にまだスペースがあるため、間違っています。

ここに画像の説明を入力してください

これが私の2番目の出力です。float：leftを変更するだけです。to float：section＃usercontent articleの右側で、ほぼ正しいですが、記事側は右側（左側にある必要があります）で、脇は左側（右側にある必要があります）にあります。フロートも配置してみます。 section＃usercontentはさておき、それは最悪になり、何度も試しましたが、これが最も近いものです。この問題を解決できる提案が必要です。どうもありがとうございました。:)

ここに画像の説明を入力してください

4

3 に答える 3

3

これを見てください：http：//jsfiddle.net/3m9fm/1/

usercontentセクションの幅を600pxに変更しました。そのセクションの幅は、記事と脇に十分な大きさではありませんでした。記事を左にフロートし、右側を脇に置き、フロートをclear：bothでクリアすることを忘れないでください。（私はすでにjsfiddleにそれを追加しました）。usercontent-widthが固定されている場合は、記事を少し小さくするか、脇に置いてください。

于 2012-08-25T15:13:24.887 に答える
1

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を追加し、幅を微調整して列を適切に収容しました。これはあなたが必要なものですか？

于 2012-08-25T15:14:18.510 に答える
1

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

デモ

于 2012-08-25T15:18:36.243 に答える