0

好的，这是我的问题：左浮动和右浮动不知何故没有放入我的容器中，页脚只关注中间内容部分。我究竟做错了什么？我可以用图片展示它，但我不能添加一个，因为我没有 10 个代表。这必须是一个简单的修复，我已经阅读了 clear:both 等，但不幸的是，这一切都不起作用。

#container
{
    position: relative;
    width: 58.5%;
    background: #FFFFFF;
    margin: 0 auto;
    border: 1px solid #336600;
    text-align: left;

    }
#header
{
    height: 160px;
    background-image:url(images/bannerboven.jpg);
}
#sideleft
{
    position: absolute;
    top: 160px;
    left: 0;
    float: left;
    width: 22%;
    background: #CCFFFF;
    padding: 15px 10px 15px 20px;
}

#sideright
{
    position: absolute;
    top: 160px;
    right: 0;
    float:right;
    width: 23%;
    background: #CCFFFF;
    font-size: 0.8em;
    padding: 15px 10px 15px 20px;
}
#mainContent
{
    margin: 0 26% 0 26%;
    padding: 0 10px;
    background:  #0F0;
    }
#footer
{
    padding: 0 10px 0 20px;
    background: #DDDDDD;
    text-align: center;
    font-weight: bold;
    }
4

2 回答 2

1

我不确定在不知道您的 html 结构的情况下您要实现什么，但问题源于您在左右容器上具有绝对定位以及浮动定位的事实。

html 元素的默认定位是静态的，因此您可以浮动所有内容或绝对定位所有内容。这里有一些东西可以帮助您更好地理解定位，它非常简单，您将在 5 分钟内上路：http ://www.barelyfitz.com/screencast/html-training/css/positioning/

此外，您应该发布一个包含 html 的jsfiddle链接，这样如果您需要进一步的帮助，我们将更好地了解您想要实现的目标。我的猜测是 Rohit Azad 的解决方案是正确的，你只是很难理解定位。

于 2012-08-16T11:37:16.180 回答
0

嗨，我检查你的代码，我认为你想要这个

HTML

<div id="container">
  <div id="header">Header</div>

  <div id="mainContent">
    <div id="sideleft">Left</div>
    <div id="sideright">Right</div>
  </div>

  <div id="footer">Footer</div>

</div>

CSS

#container
{

    width: 58.5%;
    background: #FFFFFF;
    margin: 0 auto;
    border: 1px solid #336600;

    }
#header
{
    height: 160px;
  background:red;
    background-image:url(images/bannerboven.jpg);
}
#sideleft
{
float:left;    width: 22%;
    background: #CCFFFF;
    padding: 15px 10px 15px 20px;
}

#sideright
{
float:right;
  width: 23%;
    background: #CCFFFF;
    font-size: 0.8em;
    padding: 15px 10px 15px 20px;
}
#mainContent
{
    padding: 20px 10px;
    background: green;
overflow:hidden;
    }
#footer
{
    padding: 0 10px 0 20px;
    background: #DDDDDD;
    text-align: center;
    font-weight: bold;
    }

现场演示

于 2012-08-16T11:09:54.273 回答