行爲H2標籤的旁邊有一個浮動元素

我有具有以下一些奇怪的行爲：
的Html行爲H2標籤的旁邊有一個浮動元素

<article class="feature"> 
    <div class="feature-media"> 
    <img src="image.jpg" alt="Article Feature media"> 
    </div> 
    <h2>Secondary Title</h2> 
    <p>lorum</p> 
</article

的CSS

.feature h2:before { 
    content: "" 
    float: left; 
    display: block; 
    width: 10px; 
    height: 10px; 
    margin-right: 10px; 
    background-color: #df6c4f; 
} 

.left-main .feature { 
    padding: 0 10px; 
} 

.left-main .feature-media { 
    float: left; 
    margin-right: 20px; 
}

沒有什麼複雜的，但H2標記需要文章的寬度並忽略左側的div。這意味着我的：before元素隱藏在圖像後面。我已經把所有的H2和沒有改變任何東西的僞元素都浮在了上面。

感謝

圖像： screenshot http://stage.whenthemusicstops.com/screen.png

來源

2013-01-24 jhodgson4

這裏是一個jsfiddle http://jsfiddle.net/HKQj7/你會介意提供一個你想要它的樣子嗎？ – estrar

Hi @estrar感謝您的幫助，我添加了一張圖片。正如你可以看到我的H2正在擴展並忽略左邊的div？ – jhodgson4

你是否嘗試從'h2'元素中移除'display：block'規則？我認爲這可能是什麼咬你。請記住，浮動物品位於頁面上方，因此塊級物品（如'h2'）將延伸到它們下方。 –

我已經創建fiddle，它似乎好了工作（在Chrome測試）。

我唯一注意到的是你在內容後缺少一個分號：「」，我必須刪除.left-main前綴。

.feature h2:before { 
    content:""; 
    float: left; 
    display: block; 
    width: 10px; 
    height: 10px; 
    margin-right: 10px; 
    background-color: #df6c4f; 
} 
.feature { 
    padding: 0 10px; 
} 
.feature-media { 
    float: left; 
    margin-right: 20px; 
}

來源

2013-01-24 16:42:52

行爲H2標籤的旁邊有一個浮動元素

回答

相關問題