Question

我正在构建一个非常简单的网页，其中包含标题，左侧导航框和一些内容以及页脚。它使用CSS来控制布局。如果我的内容区域中的文本很短，它可以正常工作，但如果文本的长度太长（即几乎在所有情况下），内容区域会下降到导航框下方，而不是在导航旁边很好地坐下。

HTML看起来像这样：

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB">
    <head>
        <title>Title Goes Here</title>
        <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />

        <!-- local style sheet -->
        <link rel="stylesheet" type="text/css" href="styles/screen.css" media="screen" />
    </head>
    <body>
        <div id="header">
            <h1>The Header</h1>
        </div>
        <div id="wrapper">
            <div id="navigation"><!-- Navigation -->
                <ul>
                    <li><a href="#">Navigation</a></li>
                    <li><a href="#">Options</a></li>
                    <li><a href="#">Go</a></li>
                    <li><a href="#">Here</a></li>
                </ul>
            </div><!-- Navigation end -->
            <div id="content"><!-- Main Content Area -->
                <h2>Your Content Goes Here</h2>
                <p>Whatever content you like can go here but if the text is too long it seems to
                break the floating of the content and ends up below the navigation div.
                This is really very annoying and I'd love to know how to fix it.</p>
            </div><!-- Main Content Area end -->
        </div>
        <div id="footer">
            <ul>
                <li><a href="#">Some</a></li>
                <li><a href="#">Footer</a></li>
                <li><a href="#">Links</a></li>
            </ul>
        </div>

    </body>
</html>

并且CSS看起来像这样：

body {
    background:#000;
    -webkit-background-size:1920px 1200px /* dimensions of graphic */
    font-family:helvetica,arial,sans-serif;
    margin:0;
    padding:0;
    border:0;           /* This removes the border around the viewport in old versions of IE */
    min-width:600px;    /* Minimum width of layout - remove line if not required */
                        /* The min-width property does not work in old versions of Internet Explorer */
    font-size:90%;
    width:100%;
}
#header, #wrapper, #footer {
    width:100%;
}
/* Header styles */
#header {
    clear:both;
    float:left;
}

/* main container that wraps the content */
#wrapper {
    position:relative;  /* This fixes the IE7 overflow hidden bug */
    clear:both;
    float:left;
    overflow:hidden;    /* This chops off any overhanging divs */
    background:#fff;    /* right column background colour */
    margin-top:20px;
    -moz-border-radius:25px;
    border-radius:25px;
}
#content {
    float:left;
    position:relative;
    margin-left:20px;
    padding:0 0 1em 0;
}
#navigation {
    float:left;
    position:relative;
    background:#000;
    width:150px;
    font-size:.9em;
    margin:40px 0 0 0;
    padding:0 0 1em 0;
    z-index:1002;
}
#navigation li{color:#FFF;background:#000;list-style-type:none;}
#navigation a{text-decoration:none;color:#FFF;display:block;padding:5px 15px;}
#navigation li:hover{}
#navigation li:hover a{color:#FFF;display:block;background:#4f81bd;}
#navigation li:hover ul{display:block;}

#footer {
    clear:both;
    float:left;
    font-size:.75em;
    margin-top:30px;
}
#footer p {
    padding:10px;
    margin:0;
}
#footer ul{margin:0;padding:0;}
#footer li, #footer li a{color:#aeaeae;display:inline;padding:0 5px;}
#footer li{list-style-type:none;padding:2px 0;}
#footer li a{font-weight:normal;text-decoration:none;text-transform:none;}
#footer li a:hover{text-decoration:underline;}

h1,h2,h3,h4{color:#4f81bd;}
    h1{font-size:1.6em;}
    h2{font-size:1.3em;}
    h3{font-size:1.2em;}
    h4{font-size:1em;}

我错过了什么？

Answer 1

不要浮动内容div，而是给它足够的左边距以清除导航div。

简单的两列布局，在这里说明http://jsfiddle.net/DFvyb/

Answer 2

我建议尝试使用开源网格系统而不是尝试使用自己的网格系统。

有很多，你可以查看一下这个例子： https://github.com/stubbornella/oocss/wiki

Answer 3

h2和p标签应该在div中并在下面的div检查链接上应用宽度

http://jsfiddle.net/DzQRR/

Answer 4

为 #content div设置属性，例如900px

当文本太长时，我的简单两列布局会中断。我究竟做错了什么？

4 个答案: