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

【问题标题】：creating 2 unique 3 column layouts using HTML/CSS columns使用 HTML/CSS 列创建 2 个独特的 3 列布局
【发布时间】：2012-10-30 00:48:58
【问题描述】：

编写网页时遇到了结合 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;

 }

【问题讨论】：

CSS 指定#columns，因此如果将类放在页脚中，这些样式将不适用。更改 CSS 以仅指定类，而不是 ID。
另外，您的问题应该包含 不起作用 的 HTML/CSS。当您只写“将被放置在这里”时，我们如何判断您做错了什么？
这是你的意思吗？

左栏

中间栏。

右栏。

#footer { width: 960px;填充顶部：50px；边距底部：0px；} #footer .column { 位置：相对；宽度：300px；填充：1%；边框：solid 1px #000;} #footer .left { float: left;} #footer .middle { float: left;} #footer .right { float: right; #container #col1 { 宽度：320px;浮动：左；}
我不知道这是否是我的意思，因为它完全不可读。编辑问题。