0

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

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

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

我希望正文两侧有一个导航栏（带有右边框）和广告栏（带有左边框），它们的高度扩展以匹配正文的高度（缩放取决于其中的内容量） )，以及一个简单地固定在底部的页脚。到目前为止，标题和正文完美呈现。但是，导航栏不跨越身体的高度。此外，广告栏不会出现在正文的右侧，而是环绕到最左侧（导航栏左侧和正文下方）。页脚似乎也不与网站的其余部分对齐，因为我将它写成居中对齐文本，但它偏离中心（稍微向左）。

这是我的 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 中预览我的网站。如果有人能伸出援助之手，我将不胜感激。

谢谢！

4

2 回答 2

0

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

于 2012-12-16T20:39:40.600 回答
0 
<hr style="clear:both; width:100%" />

在页脚 div 之前试试这个

于 2012-12-16T19:09:39.280 回答