Question

我正在为我的网站项目调整Blueprint CSS框架，但我注意到蓝图没有遵循它自己的一些规则。我已经在他们的网站上浏览了这些教程，并尝试使用谷歌搜索解决方案，但没有任何工作。

我正在尝试设置这样的页面布局：

-----------------------------------------------------------------------
| Image                     (header)             950px                |
-----------------------------------------------------------------------
|Navbar |             Body (560px)                            | Ad Bar|
|       |                                                     |(190px)|
| 200px |                                                     |       |
|       |                                                     |       |
   ...                       .....                                ...
|       |                                                     |       |
-----------------------------------------------------------------------
|                          (footer)            950px                  |
-----------------------------------------------------------------------

我希望Body的两侧是一个Navbar（带有右边框）和Ad Bar（带有左边框），它的高度会扩展到与Body的高度相匹配（缩放取决于内容的大小）它在里面），一个简单地贴在底部的页脚。到目前为止，标题和正文看起来很完美。但是，Navbar不会跨越身体的高度。此外，广告栏不会显示在正文的右侧，而是包含在最左侧（导航栏的左侧和正文下方）。页脚似乎与网站的其他部分不一致，因为我将其写入居中对齐文本，但它偏离中心（稍微向左）。

这是我的HTML5代码：

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />

        <link rel="stylesheet" href="blueprint/screen.css" type="text/css" media="screen, projection" />
        <link rel="stylesheet" href="blueprint/print.css" type="text/css" media="print" /> 
        <!--[if lt IE 8]>
            <link rel="stylesheet" href="blueprint/ie.css" type="text/css" media="screen, projection" />
        <![endif]-->

        <!--Import fancy-type plugin. -->
        <link rel="stylesheet" href="blueprint/plugins/fancy-type/screen.css" type="text/css" media="screen, projection" />

        <link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" />     

        <title>My Web Site Home</title>
    </head>

    <body>
        <div class="container">
            <!------------------------------------------------------->
            <div id="header" class="span-24" style="background: #F68712">
                <h1 id="siteheader"><img src="logo.png" alt="Logo" id="header-image" /></h1>
            </div>
            <div id="sidebar" class="span-5">
                <div class="span-6">
                    <a href="#"><img src="home.png" alt="Home" /></a></li>
                </div>
                <div class="span-6">
                    <a href="#"><img src="newmember.png" alt="Member Sign Up" /></a>
                </div>
                <div class="span-6">
                    <a href="#"><img src="memberlist.png" alt="Member List" /></a>
                </div>
            </div>
            <div id="main" class="span-12 prepend-1 append-1" style="background: #F5F5DC">
                <p>Some text.</p>

                <p>Some more text.</p>

                <p>Even more text!</p>
            </div>
            <div id="adbar" class="span-5 last">
                Ads.
            </div>
            <div id="footer" class="span-24" style="text-align: center">
                <h6 class="alt">Copyright &copy;2012 Joe Schmo.</h6>
            </div>
            <!------------------------------------------------------->
        </div>
    </body>
</html>

我已经按照网站上的所有英语教程，但似乎无法弄清楚为什么它不想合作。我正在使用Microsoft Webmatrix开发我的网站，并且正在IE9和Chrome中预览我的网站。如果有人可以伸出援助之手，我真的欣赏它。

谢谢！

Answer 1

<hr style="clear:both; width:100%" />

在页脚div之前尝试这个

Answer 2

对于侧边栏，你有一个span-5类，但它包含3个span-6 div。如果删除三个菜单div的class属性，因为我假设您希望它们是包含div的全宽，这是否可以解决您的问题？

蓝图CSS网格布局异常

2 个答案: