我怎麼能執行一個明確的一個DIV的

我有這樣的代碼，我想後面要左對齊，並且下面的段落：我怎麼能執行一個明確的一個DIV的

<div class="content_hdr clearfix"> 
    <div class="clearfix content_hdr_heading">System Test</div> 
    <div class="content_hdr_intro"> 
    <p> 
Some text 
    </p></div> 
</div> 

.clearfix:after{ 
    clear: both; 
    content: "."; 
    display: block; 
    height: 0; 
    visibility: hidden; 
} 

div.content_hdr_heading { 
    float: left; 
    background: #ff9999; 
}

我創造了這個fiddle

希望有人能夠幫助。

來源

2011-05-20 Marilou S

爲什麼標題是浮動的？它的右邊沒有任何東西。 – 2011-05-20 14:01:35

另外，考慮標題的標題元素（H1，H2，...）。 – 2011-05-20 14:03:02

<div class="content_hdr"> 
    <div class="content_hdr_heading">System Test</div> 
    <div class="content_hdr_intro"> 
     <p>Some text</p> 
    </div> 
</div> 

.content_hdr_heading { 
    float: left; 
    background: #ff9999; 
} 

.content_hdr_intro { 
    clear: left; 
}

因爲在這種情況下，有浮動後清除元件，這是沒有必要的，但我通常把這個漂浮的含元素保存與以下內容頭痛於：

.content_hdr { 
    overflow: hidden; 
}

來源

2011-05-20 13:58:34 deceze

標題有背景。如果沒有浮動，那麼背景會從頁面的一側移到另一側。然後內容下面，但它不是我想要的。我只想把背景放在標題詞下面。 – 2011-05-20 14:04:12

@Marilou是的，我猜這畢竟是有道理的。 – deceze 2011-05-20 14:06:07

謝謝您花時間回答。我決定用你的不錯的解決方案。 Marilou – 2011-05-20 14:12:12

p {明確：兩者; }

你不需要你有那裏的clearfix。這似乎是多餘的。如果它的標題標籤使用H1，H2等

來源

2011-05-20 14:01:19 corymathews

考慮一下：

HTML：

<div class="content_hdr"> 
    <div class="content_hdr_heading"> 
     <h2>System Test</h2> 
    </div> 
    <div class="content_hdr_intro"> 
     <p>Some text</p> 
    </div> 
</div>

CSS：

div.content_hdr_heading { 
    overflow:auto;  
} 

div.content_hdr_heading h2 { 
    float: left; 
    background: #ff9999; 
}

現場演示：http://jsfiddle.net/simevidas/HmkMj/3/

來源

2011-05-20 14:07:04

謝謝Sime。我決定使用其他解決方案，但感謝您花時間提供幫助。 – 2011-05-20 14:12:47

@馬裏洛酷'：）' – 2011-05-20 14:20:10

我怎麼能執行一個明確的一個DIV的

回答

相關問題