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

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 应该是唯一的。 (感谢迈克尔)