1

这段代码：

  <div id="columns">
        text
    </div>
    <div id="columns">
        text
    </div>
    <div id="columns">
        text
    </div>

用这个 css 编码：

   #columns {
        width: 200px;
        float: left;
        margin-left: 20px;
        margin-right: 20px;
    }

问题是，如果我在创建的三列下方放置任何文本，它只会添加另一列！我希望页脚位于这些列下方，但到目前为止我只能通过设置来做到这一点：

footer {
    /*height: 50px;*/
    text-align: center;
    position:absolute;
    bottom:0;
}

而这只会使页面更长，即在此内容和页脚之间放置一个巨大的差距。有什么解决办法吗？

谢谢

4

6 回答 6

2

元素向左浮动，从而修改了文档流。需要在编写页脚之前重置文档流。可以通过设置clear:both页脚的属性来完成（实际上是在.columns完成之后）。

一个工作的jsfiddle就在这里。

CSS：

footer{
    clear: both;
}

建议（问题范围之外）：您应该更改id="columns"为class="columns"有效的 html 标记，id 应该是唯一的。（感谢迈克尔）

于 2013-09-17T05:46:23.977 回答
0

尝试这个

演示

css

   *{
        margin:0;
        padding:0;
    }
    #columns {
            width: 200px;
            float: left;
            margin-left: 20px;
            margin-right: 20px;
        background-color:red;


        }
    .clearfix{
        clear:both;
    }
    footer {
        /*height: 50px;*/
        text-align: center;
        position:absolute;  
        border:1px solid red;
    }

html

<div id="columns">
        text
    </div>
    <div id="columns">
        text
    </div>
    <div id="columns">
        text
    </div>
<div class="clearfix"></div>
<footer>footer</footer>
于 2013-09-17T05:43:01.943 回答
0

使用任何浮动项目时，默认行为是它们不计入该区域中的其他内容，因此它们会出现在其他内容的一侧。

当然，如果您想防止这种情况发生，该clear属性将基本上继续位于其之前一侧（或任一侧）的任何浮动项目下方。

footer {
    height: 50px;
    clear: both; /* can also use `clear: left` here */
}
于 2013-09-17T05:44:10.310 回答
0

bottom:0;在第三列之后删除并放在下面的html代码后尝试

<div id='footer'>
   <p>Footer Content</p>
</div>
于 2013-09-17T05:44:24.720 回答
0

您需要使用 css clear 来解决您的问题

喜欢clear :both你 div 的 id/class

于 2013-09-17T05:45:26.630 回答
0
文本 
<div id="columns">
    text
</div>
<div id="columns">
    text
</div>

<div style="clear:both"></div>
<footer>footer</footer>

于 2013-09-17T05:55:24.453 回答