Question

好的，这是我的问题：左浮动和右浮动以某种方式不放入我的容器中，并且页脚仅关注中间内容部分。我究竟做错了什么？我可以用图片显示它，但我不能添加一个，因为我没有10个代表。它必须是一个简单的解决方案，我已经阅读了明确的内容：两者等，但不幸的是，一切都不起作用。

#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;
    }

Answer 1

我不确定你在不知道你的html结构的情况下想要实现什么，但问题源于你在左右容器上的绝对定位以及一个floted定位。

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

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

Answer 2

您好我检查您的代码我认为您想要这个

<强> 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;
    }

的 Live demo 的

我在CSS中的页脚不关注我的左右内容，只关注中间内容

2 个答案: