1

我试图通过尝试用 HTML/CSS 制作简单的网站来学习 HTML/CSS。到目前为止，我已经建立了一些基本的骨架，但有些事情我无法解决。

我有一个问题，即 div 的文章列表、sidebar1、sidebar2 放在 div 页脚内，但我想将 div 的文章列表、sidebar1、sidebar2 放在页脚之外。

这是相关代码：HTML：

        <!-- article listing -->
        <div class="articlelisting">
            articlelisting
        </div>

        <!-- sidebar 1 -->
        <div class="sidebar1">
            sidebar1
        </div>

        <!-- sidebar 2 -->
        <div class="sidebar2">
            sidebar2
        </div>

        <!-- footer -->
        <div class="footer">
            footer
        </div>

CSS：

.articlelisting {
display: inline;
width: 48%;
float: left;
}

.sidebar1 {
display: inline;
width: 24%;
float: right;
}

.sidebar2 {
display: inline;
margin-right: 15px;
width: 24%;
float: right;
}

 .footer {
width: 100%;
border: solid 1px red;
}

编辑：我已经放置了文章列表 div。对不起，我错过了。

我的问题是为什么 div 文章列表、sidebar1、sidebar2、inside div footer，以及如何将它们放在 div footer 之外？

谢谢

4

3 回答 3

2

嘿现在清楚你的页脚就像这样

    .footer{
    clear:both;
    overflow:hidden;
       /// and write some properties as required to
    }

现场演示http://tinkerbin.com/9vrEFCqo

于 2012-07-16T07:17:32.340 回答
2

添加clear: both;到您的页脚样式。这可以确保页脚与前面的 div 保持一致float。

.footer {
  clear: both; <-- Add this
  width: 100%;
  border: solid 1px red;
}​

我在jsfiddle发布了一个工作示例

于 2012-07-16T07:18:50.933 回答
1

然后将您的文章列表、sidebar1、sidebar2 放在页脚之外。

并给

.footer {
width: 100%;
border: solid 1px red;
clear:both;
}
于 2012-07-16T07:15:04.400 回答