1

我正在开发一个新模板，尝试使用一些 CSS3 和 HTML5 技术......

有一个小问题...当我使用 FireBug 检查此页面时，我可以看到我的左列和右列没有被封装到#container div 中。而且我意识到我将它们都漂浮在了左边……但无法弄清楚我需要做什么才能将它们包裹在容器 div 中……

这是 HTML：（链接到页面以防万一）http://www.bcidaho.com/dev-acn/index.asp

    <body>

  <div id="container">

    <!--#include file="_includes/top-nav-header.asp"--> 

    <!--#include file="_includes/home-nav.asp"-->


        <div id="left-col">
            <p>Lef Nav Column</p>
        </div><!-- End #left-col -->

        <div id="main-col">
            <p>Main Column</p>
        </div><!-- End #main-col -->


  </div> <!--! end of #container -->

    <!--#include file="_includes/footer.asp"-->
</body>

CSS 位于此处：（不想在这篇文章上扔大量 CSS 抱歉）http://www.bcidaho.com/dev-acn/css/style.css

4

3 回答 3

2

他们正在被装箱。在萤火虫中，它看起来不像，因为它们的浮动没有被清除。将此添加到您的CSS：

.clear {
    clear:both;
}

之后：

<div id="left-col">
            <p>Lef Nav Column</p>
        </div><!-- End #left-col -->

        <div id="main-col">
            <p>Main Column</p>
        </div><!-- End #main-col -->
<div class="clear"></div>

那应该这样做。

于 2011-07-07T15:59:59.047 回答
1

添加overflow: hidden;, overflow: auto;, 或float: left;到 div#container

于 2011-07-07T16:03:42.090 回答
0

适用overflow:hidden于“容器”

于 2011-07-07T16:01:30.090 回答