我不能讓這些浮動與CSS正確

我想浮在一個頭並排的兩個圖像，但不能讓它的工作。重要的是，其中一個比另一個高，但我不認爲這應該是一個問題我不能讓這些浮動與CSS正確

在我失敗的嘗試（我什至不能讓他們浮動在所有），我設置它像這樣...總標題面積爲850像素，所以我把它分成一半，每個圖像

<div class="header a"><a href="http://example.com/"> 
<img src="http://example.com/pic.jpg" width="400" height="50" padding-left="10px" alt="dodobird" /> 
</a></div> 

<div class="header b"> 
<a href="http://example.com/"> 
<img src="http://example.com/2.jpg" width="400" height="70" padding-left="10px" alt="dodobird" /> 
</a></div>

我失敗的CSS是這樣的。你能告訴我我做錯了什麼嗎？

.header { 
    position: relative; 
    float: left; 

    width: 400px; 
    border: 1px solid #fff; 
    margin: 0 15px 15px 0; 
    padding: 5px 10px 10px 10px; 

} 

.header div { 
    width: 400px; 

    position: absolute; 
    top: 0; 
    left: 0; 

} 

.a div { 
    height: 50px; 
} 

.b div { 
    height: 70px; 
}

來源

2011-06-25 Leahcim

你1px的邊框加上15像素利潤率使你的DIV佔用417px。 – Sparky

你的'class div'規則不適用於任何事物，因爲在這些類下面沒有div，只是圖像和鏈接。 – 2011-06-25 04:09:46

你有兩個div上的標題上的填充。

.header div是毫無意義的，因爲.header內沒有div（.header是本例中的div）。

你真正需要的是這樣的：

.header { 
    float: left; 
    width: 400px; 
} 

.a { 
    height: 50px; 
} 

.b { 
    height: 70px; 
}

來源

2011-06-25 04:11:24 cwhelms

o.k，它工作，但由於某種原因，它只適用於Chrome和Safari，但不是Firefox ......任何想法爲什麼？ – Leahcim

它爲我工作。 http://jsfiddle.net/8n2rx/ – cwhelms

每個標題爲400px寬+ 20px填充+ 15px margin + 2px border = 437px。所以如果你的容器寬度設置爲800px，那就是問題......你沒有足夠的空間。

來源

2011-06-25 04:09:14

您必須選擇相對位置或浮動位置。 Floats會初始化除位置之外的其他框上下文。你也必須將圖像容器浮在標題div內，並且這個標題div（容器之一）需要具有指定的寬度。

來源

2011-06-25 04:09:37 philipp

我不能讓這些浮動與CSS正確

回答

相關問題