4

我有一些非常简单的 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>

我遇到的问题是我的脚像这样坐在我的“柱子”上（图像传入）

文字重叠

4

1 回答 1

1

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

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

您看到的问题是由于float列上的。CSS float 使元素脱离正常流动，因此包含元素的高度在渲染时不会考虑浮动元素的高度。

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

另一种方法是clear浮动内容 - 请参阅http://css-tricks.com/snippets/css/clear-fix/和我可以使用哪些“clearfix”方法？

于 2013-06-08T06:08:36.663 回答