css：div问题有关定位{vertical align and background}

Question

您好我对此代码有三个问题，

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

1）为什么黑色背景的div没有覆盖红色背景的div？[完成]

2）为什么文本超出div所包含的内容？[done]

3）如何在第三个div中心和垂直中间对齐制作图像和文本[无法找到垂直对齐的答案]

4）如何使黑色背景覆盖100％宽度以及高度....宽度：100％工作但高度：100％不？

Answer 1

  

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％没有？

您需要在height: 100%的所有父元素上设置#black才能使height: 100%正常工作：

html, body {
    height: 100%
}

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

Answer 2

@koool; for 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

Answer 3

所有div都需要浮动：left add float：left to #black

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

Answer 4

移除红色容器上的浮子，红色容器将位于黑色容器内。

Answer 5

1,2）保证金：0自动; - 中心div。向左飘浮;漂浮它.....只是决定你需要什么。

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