Question

<div id="footer">
    <div>
    <h2>Revovation</h2>
    <p>Our mission is to provide the best handyman service at an reasonable price without sacrificing quality. You will be satisfy with our work knowing we take the necessary steps to meet your needs and get the job done right
    </p>
    </div>
    <div>
        <h2>Information</h2>
            <div>
                <ul>
                    <li>Blog</li>
                    <li>Services</li>
                    <li>Extras</li>
                    <li>Contact</li>
                </ul>
            </div>
            <div>
                <ul>
                    <li>Projects</li>
                    <li>Information</li>
                    <li>About us</li>
                    <li>Shop</li>
                </ul>
            </div>
    </div>
    <div>
        <h2>Renovation Office</h2>
        <ul>
            <li><img src="images/marker.png" alt="">Address</li>
            <li>Phone</li>
            <li>Email</li>
            <li>Fax</li>
            <li>Timings</li>
        </ul>
    </div>

</div>

编辑：添加css

#footer
{

    background  :  #282828; 
    border: 2px solid blue;
    font-family  :  verdana;
    position: relative;
     color : #8e9a8c;
}


#footer div
{
    background  :  #282828; !important;
    width  :  28%;
    border: 1px solid red;
    float : left;
    padding: 60px 0px 30px 40px;
}

蓝色边框用于页脚div，红色边框用于其中的div。我在div里面漂浮到左边。为什么外部div不会涵盖所有三个内在的div？我不知道这里出了什么问题！

Output Screenshot

Answer 1

这看起来像一个元素的浮动子元素折叠父母高度的主要情况：https://css-tricks.com/snippets/css/clear-fix/

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
    }
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

只需将课程clearfix添加到高度已折叠的元素中，在这种情况下：

<div id="footer" class="clearfix">

Answer 2

您可以向页脚元素添加float属性：

https://jsfiddle.net/Ln2fy2a4/

#footer
{
background  :  #282828; 
border: 2px solid blue;
font-family  :  verdana;
position: relative;
color : #8e9a8c;
float: left;
}

Answer 3

如果在父div中放置了div，则需要使用clearfix方法。只需将这些标尺添加到您的css文件中：

.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

然后将clearfix类添加到父div。

Answer 4

添加一个属性溢出：隐藏到

#footer {
    background  :  #282828; 
    border: 2px solid blue;
    font-family  :  verdana;
    position: relative;
    color : #8e9a8c;

    overflow: hidden;
}

Answer 5

这是你做错了什么。只需把这个脚本放在你的脚本上。

#footer
{

    background  :  #282828; 
    border: 2px solid blue;
    font-family  :  verdana;
    position: relative;
     color : #8e9a8c;
}
#footer-div
{
    background  :  #282828 !important;
    width  :  28%;
    border: 1px solid red;
    float : left;
    padding: 60px 0px 30px 40px;
}

以下是您必须使用的HTML代码而不是您的代码

<div id="footer">
    <div id="footer-div">
    <h2>Revovation</h2>
    <p>Our mission is to provide the best handyman service at an reasonable price without sacrificing quality. You will be satisfy with our work knowing we take the necessary steps to meet your needs and get the job done right
    </p>
    </div>
    <div id="footer-div">
        <h2>Information</h2>
            <div>
                <ul>
                    <li>Blog</li>
                    <li>Services</li>
                    <li>Extras</li>
                    <li>Contact</li>
                </ul>
            </div>
            <div>
                <ul>
                    <li>Projects</li>
                    <li>Information</li>
                    <li>About us</li>
                    <li>Shop</li>
                </ul>
            </div>
    </div>
    <div id="footer-div">
        <h2>Renovation Office</h2>
        <ul>
            <li><img src="images/marker.png" alt="">Address</li>
            <li>Phone</li>
            <li>Email</li>
            <li>Fax</li>
            <li>Timings</li>
        </ul>
    </div>

</div>

div里面的div不能正常工作

5 个答案: