浮動之後出現的元素正常內容

Question

我遇到問題。在下面的標記中，有一個預留元素，其中包含用戶想要顯示的其他信息，如附圖所示（右浮動）。

<section> 
    <h2>site title</h2> 
    <p>that's the site's main content</p> 
    <aside> 
     <h3>other stuff</h3> 
     <div>cloud tag</div> 
    </aside> 
</section> 

不過，我不希望H2元素，只是右浮動之前將其擱置元素放置。我知道這會起作用，但不知怎的，這對我來說似乎是錯誤的。人們可以說，搜索引擎知道它是不太重要的內容，因爲它包含在旁邊元素中。

但是我還想要在旁邊元素的行爲，即當頁面的寬度較小（例如較小的設備）時，旁邊元素保持低於主要內容。

所以我的問題是：是否有任何可能性浮動旁邊元素如圖所示，沒有操縱標記順序（添加幫助div的是好的，我猜）。

謝謝，期待。

Answer 1

您需要包裝在一個div你的主要內容，然後添加float: left於主DIV和你的aside元素。然後，使用margin屬性來適當地分隔它們。

HTML

<section> 
    <div class="main"> 
     <h2>site title</h2> 
     <p>that's the site's main content</p> 
    </div> 
    <aside> 
     <h3>other stuff</h3> 
     <div>cloud tag</div> 
    </aside> 
</section> 

CSS

.main { 
    float: left; 
} 
aside { 
    float: left; 
} 

見DEMO。