Question

我有一些非常简单的CSS代码似乎没有正常工作......

html, body { border:0; margin:0; padding:0; }
body { font:12px Arial, Helvetica, sans-serif; background: url(../img/bg-tile.png) repeat; color: #444}

.content{
    background-color:#CCDDEE;
    width:100%;
    margin: 0px auto;
}

.column{
    padding:0% 2% 0% 0%;
    width:29%;
    float:left;
    height:auto;
}

.myText{
    padding:0px 25% 0px 0px;
    font-size:16px;
}

.footer{
    margin-bottom:2%;
    padding:0px;
    position: absolute;
}

.wrapper { 
    width:75%;
    height:auto;
    margin:1% auto; 
}

我的HTML看起来像这样：

<body>
    <div class="wrapper">
        <img src="img/logo2.jpg" alt="" />
                    <!--Snipped some code Just a nav -->
        <br /><br />
        <div class="content">
            <img src="img/slider6.jpg" alt="" /><br /><br />
            <div class="column">
                <p class="myText">
                Testing some text, Testing some text, Testing some text, Testing some text, Testing some text, Testing some text, Testing some text, Testing some text, Testing some text, Testing some text,
                </p>
            </div>
            <div class="column">
            <p class="myText">
                Testing some text, Testing some text, Testing some text, Testing some text, Testing some text, Testing some text, Testing some text, Testing some text, Testing some text, Testing some text,
            </p>
            </div>
            <div class="column">
            <p class="myText">
                Testing some text, Testing some text, Testing some text, Testing some text, Testing some text, Testing some text, Testing some text, Testing some text, Testing some text, Testing some text,
            </p>
            </div>
        </div>
        <br />
    </div>
    <div class="footer">
        &copy;2013 blahblahblah&reg; | Terms of Use | Privacy Policy | Press Inquiries
    </div>



</body>
</html>

我遇到的问题是我的脚像我一样坐在我的“列”之上（图像传入）

Text overlap

Answer 1

将overflow:hidden;添加到.content会使.content正确包含浮动元素。这也将使背景颜色适用于浮动列。

如果您不希望.content 包含浮动元素，请将overflow:hidden;添加到.wrapper。

您看到的问题是因为列上的float。 CSS float将元素从正常流中移出，因此包含元素的高度在渲染时不会考虑浮动元素的高度。

因此，页脚将在内容（正确）之后呈现，但.content的高度不正确。

另一种方法是clear浮动内容 - 请参阅http://css-tricks.com/snippets/css/clear-fix/和What methods of ‘clearfix’ can I use?

Css div没有正确对齐

1 个答案: