Question

我最近在网站上工作并遇到了一个主要问题：http：//jimbob.webatu.com/index.html（你需要在网页上看到编码）。我已经设置了我的网站向上，所以有两个主要的列，但中间位于中间。内部包装是将所有内容集中在一起，两列向左或向右浮动：

     #wrap    {
     width:750px;
     margin:0 auto;
     background-color:#6E6E6E;
     border-left:3px solid #A9E2F3;
     border-right:3px solid #A9E2F3;
     }
     #main    {
     float:left;
     width:496px;
     background:white;
     border-top-right-radius:5px 5px;
     border-bottom-right-radius:5px 5px;
     }
     #sidebar {
     float:right;
     width:250px;
     } `

最近虽然我试图添加一个页脚栏，就像顶部的导航栏一样。这已被设置为通过使用“clear：both”整体保持整体，并且一直试图让它完全避免“包装”id。但是出现了一些问题并且div控制了“wrap”和“secondborder”不会完全关闭。另外你可能会看到后面出现了一个灰色条，并且“换行”背景将不适用（我将侧边栏背景设置为空，以便“换行”背景适用于它。这使它看起来有点整洁）。我不能粘贴所需的编码，因为太分散而且太长（查看网页上的页面源）。任何人都可以提供“包装”背景和“页脚”不居中的解决方案吗？我过去3个月只学习了HTML和编码，所以如果这是我犯过的一个愚蠢的错误，请原谅我。再次链接到我的网站，问题是：http://jimbob.webatu.com/index.html

Answer 1

添加溢出：隐藏;到你的#wrap

#wrap {
    width: 750px;
    margin: 0 auto;
    background-color: #6E6E6E;
    border-left: 3px solid #A9E2F3;
    border-right: 3px solid #A9E2F3;
    height: auto;
    overflow: hidden;
    }

为了让你的#footer在页面底部像页脚一样，你必须将它从#sidebar中取出并在#sidebar结束后放置。这应该可以解决你的问题。

要修复#sidebar被切断，你需要将其向左浮动而不是向右浮动，

#sidebar {
    float: left;
    width: 250px;
    }

希望这有帮助。

Answer 2

一般来说，你需要在浮动div后清除。这告诉浏览器停止下一个元素的浮动。查看我在<div id="footer"> <br style="clear:both" />

之前添加的HTML

此外，在您关闭#wrap之前，请添加另一个<br style="clear:both" />

Answer 3

我刚刚为你的第二个边框元素添加了一个新div：<div style="clear:both"></div>对问题进行了排序。你是浮动的，没有清除边栏或主要的div。

Css页脚和背景

3 个答案: