Css div没有正确对齐

Question

I have some pretty simple CSS code that doesn't seem to be working right... 我有一些非常简单的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; 
}

My html looks like this: 我的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>

The issue that I'm having is that my foot is sitting on top of my "columns" like so (image incoming) 我遇到的问题是我的脚像我一样坐在我的“列”之上（图像传入）

文字重叠

Answer 1

Adding overflow:hidden; 添加overflow:hidden; to the .content will make the .content correctly contain the floating elements. .content将使.content正确包含浮动元素。 That will also make the background colour apply to the floating columns. 这也将使背景颜色适用于浮动列。

If you don't want the .content to contain the floated elements, add overflow:hidden; 如果您不希望.content 包含浮动元素，请添加overflow:hidden; to the .wrapper instead. 转而使用.wrapper 。

The problem you are seeing is because of the float on the columns. 您看到的问题是因为列上的float 。 CSS float takes the element out of normal flow and therefore the containing element's height will not take the floated element's height into consideration when being rendered. CSS float将元素从正常流中移出，因此包含元素的高度在渲染时不会考虑浮动元素的高度。

Therefore the footer will be rendered after the content (correctly) but the .content has the wrong height. 因此，页脚将在内容（正确）之后呈现，但.content具有错误的高度。

An alternate way to do this is to clear the floated content - see http://css-tricks.com/snippets/css/clear-fix/ and What methods of 'clearfix' can I use? 另一种方法是clear浮动内容 - 请参阅http://css-tricks.com/snippets/css/clear-fix/以及我可以使用哪些'clearfix'方法？

Css div没有正确对齐

问题描述

1 个解决方案

解决方案1
1 已采纳 2013-06-08 06:08:36

Css div没有正确对齐

问题描述

1 个解决方案

解决方案1 1 已采纳 2013-06-08 06:08:36

解决方案1
1 已采纳 2013-06-08 06:08:36