Question

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

有一个小问题...当我使用FireBug检查此页面时，我可以看到我的lef列和右列没有被包含在#container 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

Answer 1

他们被包围了。在萤火虫中它看起来不像它，因为它们的浮子没有被清除。将此添加到您的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>

应该这样做。

Answer 2

将overflow: hidden;，overflow: auto;或float: left;添加到div＃container

Answer 3

将overflow:hidden应用于“容器”

CSS列结构

3 个答案: