编写网页时遇到了 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;
}
最佳答案
我 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;}
关于html - 使用 HTML/CSS 列创建 2 个独特的 3 列布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13131744/