如何使文章，放在旁邊的部分與水平顯示相同

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中）。如果您的用戶內容寬度是固定的，請將文章或稍微放一邊。

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

我讓他們都留下浮動，增加了一個 「明確的」 分區和調整寬度正確適應列。這是你需要的嗎？

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