css：关于定位{垂直对齐和背景}的div问题答案

【问题标题】：css : div question regarding positioning {vertical align and background}css：关于定位{垂直对齐和背景}的div问题
【发布时间】：2011-09-19 11:28:09
【问题描述】：

您好，我有关于此代码的三个问题，

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

2）为什么文本会超出其所在的 div？[完成]

3) 如何使第三个 div 中的图像和文本居中并垂直居中对齐[找不到垂直对齐的答案]

4) 如何使黑色背景覆盖 100% 的宽度和高度 .... width: 100% 有效，但 height: 100% 无效？

【问题讨论】：

标签： css

【解决方案1】：

1) 为什么是黑色背景的 div 没有用红色覆盖 div 背景？

因为你还没有清除你的花车。清除浮动的一种方法是将overflow: hidden 添加到#black。

请参阅： http://jsfiddle.net/pJMva/108/ （我将您的文字设为白色以提高可见度）

2）为什么文本会超出 div 包含在什么地方？

div 不够宽，无法包含文本（假设您的窗口相当窄）。您可以通过将word-wrap: break-word 添加到#fl_dv 来强制文本换行。

3) 我如何制作图片和文字第三个 div 居中并垂直居中对齐

4) 如何制作黑色背景覆盖 100% 的宽度和高度 .... 宽度：100% 有效，但高度： 100% 没有？

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

html, body {
    height: 100%
}

【讨论】：

【解决方案2】：

@koool;解决方案

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
}

【讨论】：

【解决方案3】：

所有的 div 都需要为 float:left 添加 float:left 到 #black

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

【讨论】：

【解决方案4】：

去掉红色容器上的浮子，你的红色容器就会在黑色容器内。

【讨论】：

【解决方案5】：

1,2) 边距：0 自动； - 中心分区。向左飘浮;将其向左浮动.....只需决定您需要什么。

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

【讨论】：