CSS：關於定位{垂直對齊和背景}

你好我有一個關於這個代碼三個問題DIV的問題，CSS：關於定位{垂直對齊和背景}

http://jsfiddle.net/pJMva/125/

1）爲什麼用黑色背景不覆蓋有紅色背景的股利股利[？做]

2）爲什麼在div外面去文本及其中所含？[完成]

3）如何使在第三格中心和垂直方向的中間對齊[圖片和文字無法找到一個回答垂直alignm ]

4）我如何使黑色背景覆蓋100％寬度以及高度....寬度：100％的作品，但高度：100％沒有？

來源

2011-06-21 koool

有沒有第三格？＃3的 – Kyle

參考我的答案[here]（http://stackoverflow.com/questions/5729593/how-to-keep-the-text-vertically-aligned-in-any-condition/5729761#5729761）或發佈作爲一個單獨的問題。複合問題往往不能很好地解決所有複合部分問題。 –

http://jsfiddle.net/pJMva/116/對不起，我忘了保存它我已經更新了這個問題 – koool

1）爲什麼div背景爲黑色沒有用紅色背景覆蓋div？

因爲你還沒有清理你的浮標。清除浮標的一種方法是將overflow: hidden添加到#black。

參見：http://jsfiddle.net/pJMva/108/（我做了能見度的文白）

一篇好文章來解釋花車：http://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/

2）爲什麼文本會在 DIV以外的包含在？

div不足以包含文本（假設您的窗口相當窄）。您可以通過將word-wrap: break-word添加到#fl_dv來強制文本換行。

參見：http://jsfiddle.net/pJMva/109/

3）如何使圖像和文字在第三DIV中心和垂直中間對齊

正如@faraz建議，請參閱： http://css-tricks.com/vertically-center-multi-lined-text/

類似於：http://jsfiddle.net/pJMva/127/

4）如何使黑色背景覆蓋100％的寬度以及高度 ....寬度：100％的工作，但高度： 100％犯規？

您需要設置的#black所有父元素height: 100%，使height: 100%工作：

html, body { 
    height: 100% 
}

http://jsfiddle.net/pJMva/128/

來源

2011-06-21 12:13:58 thirtydot

我沒有添加第三個div，我忘了將它保存在第一個地方抱歉！ – koool

+1爲此付出的努力謝謝...添加了第三個和另外一個問題... – koool

可否請您看看更新後的問題請 – koool

所有的div必須浮動：左加浮動：左#black

#black 
{ 
    background-color: #000; 
    width: 100%; 
    color: white; 
    margin: 0 auto; 
    padding: 10px; 
    float: left; 
}

來源

2011-06-21 12:12:18 kleinohad

紅色的集裝箱卸下float和你的紅色貨櫃將黑色容器內。

來源

2011-06-21 12:13:10 Kon

@koool;對於soltuion

1）你給float的子元素#fl_dv。所以，首先要明確它與overflow:hidden

#black 
{ 
    background-color: #000; 
    width: 100%; 
    color: white; 
    margin: 0 auto; 
    padding: 10px; 
    overflow:hidden; 
}

2）你在一個字那麼文本;你必須使用word-wrap: break-word;來打破這個詞。

#fl_dv 
{ 
    float: left; 
    margin: 0 auto; 
    width: 30%; 
    background-color: red; 
    color: #000; 
    word-wrap: break-word 
}

檢查fiddle

來源

2011-06-21 12:14:43 sandeep

+1感謝努力 – koool

1,2）餘量：0汽車; - 中心分區。向左飄浮;漂浮它.....只需決定你需要什麼。

#fl_dv 
{ 
    /*float: left;*/ 
    left: 0; 
    margin: 0 auto; 
    width: 30%; 
    background-color: red; 
    color: #000; 
}

來源

2011-06-21 12:15:00 Subdigger

CSS：關於定位{垂直對齊和背景}

回答

相關問題