html - 使用 HTML/CSS 列创建 2 个独特的 3 列布局

Question

编写网页时遇到了 HTML 和 CSS 组合的问题。我想在页脚中创建相同的现有 3 列布局。当我将 HTML/CSS 复制/粘贴并重命名为页脚时，代码无法用作列。如何将第二个 3 列布局添加到页脚，其功能与第一个 3 列布局相同？

这里是html/CSS的问题

<div id="columns">

<div class="left column">
    <p>left column</p>
</div>

<div class="middle column">
    <p>middle column.</p>
</div>    

<div class="right column">
   <p>right column.</p>
</div>
</div>

<div class="footer">
  <!-- 3 column layout would be placed inside the footer -->

 #columns {
width: 960px;
padding-top: 50px;
margin-bottom: 0px;
}


#columns .column {
    position: relative;
    width: 300px;
    padding: 1%;
    border: solid 1px #000;
}

#columns .left {
    float: left;
}

#columns .middle {
    float: left;
}
#columns .right {
    float: right;
    #container #col1 {
    width: 320px;
    float: left;

 } 

Answer 1

我 float 了所有左边的东西，并确保页脚和列有足够的宽度可以并排放置，并且它看起来像你想要的那样:

#columns {
padding-top: 50px;
margin-bottom: 0px;
width:1200px;
}
.column {
position: relative;
width: 300px;
padding: 1%;
border: solid 1px #000;
}
.column{float:left;}
.footer{width:1200px;}

http://jsfiddle.net/trG5B/