Question

此代码：

  <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;
}

这只会使页面更长，即在内容和页脚之间留下巨大的差距。任何解决方案？

由于

Answer 1

元素向左浮动，使文档流程得到修改。文档流程需要在写入页脚之前重置。可以通过为页脚设置属性clear:both来完成（实际上就在.columns完成之后）。

工作jsfiddle就在这里。

CSS：

footer{
    clear: both;
}

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

Answer 2

试试这个

<强> demo

<强> 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>

Answer 3

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

当然，如果你想要阻止它，clear属性将基本上继续在它之前的一个（或任一）一侧的任何浮动项目之下。

footer {
    height: 50px;
    clear: both; /* can also use `clear: left` here */
}

Answer 4

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

<div id='footer'>
   <p>Footer Content</p>
</div>

Answer 5

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

喜欢{div =

的id / class clear :both

Answer 6

文本

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

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

如何使用div标签在html中定位文本？

6 个答案: