1

我有一个带有页眉、页脚、正文内容的布局。这是一个非常标准的布局。我们的报告有时会超出硬编码的宽度，但我们需要将左侧导航和正文内容放在同一行。使用下面的这段 HTML 代码，如果宽度延伸得太远（比如正文中的内容宽度超过 900+），那么正文内容会在左侧导航下方流动。

基本上，我们希望内容和左导航保持在同一行，无论该正文内容部分中实际有多少内容。有没有办法强制浏览器始终将这些项目保留在同一行。

<html>
    <head>
        <title>Test</title>

        <style type="text/css">

            #bodyFull {

            }

            #header {
                border: 3px solid #f00;
                background-color: #99F;
                width: 900px;
            }

            #footer {

                border: 3px solid #909;
                background-color: #F99;
                width: 900px;

            }

            #leftNav {
                float: left;
                width: 150px;
                height: 800px;
                border: 2px solid #777;
                background-color: #FF9;
            }

            #bodyContent {
                float: left;

                border: 2px solid #707;
                background-color: #AAA;

                width: 1024px;
                height: 1024px;
                            overflow: hidden

            }

            #mainBody {

                width: 920px;
            }


        </style>

    </head>

    <body>

        <div id="bodyFull">

            <div id="header">
                The Header
            </div>

            <div id="mainBody">

                <div id="leftNav">
                    Left Nav
                </div>

                <div id="bodyContent">
                    The Body
                </div>

                The End of Main Body

            </div>
            <div style="clear: both"></div>
            <div id="footer">
                The Footer
            </div>

        </div>

    </body>

</html>

小错字：bodyContent 与 leftNav 位于同一行。

/* !!! 此部分是否可以与左侧导航保持在同一行，即使它超出了“标题/正文”宽度*/

4

2 回答 2

1

好的，忘记我的margin-left建议，误解了问题。如果您想确保 div 始终为 750 像素（这样加上左侧导航与标题的宽度相同），则将其宽度设置为 750 像素并设置为overflow: auto在必要时在页面的该部分添加滚动条，或者overflow: hidden只是截断它。

于 2009-07-10T15:27:06.993 回答
0

废话不多说，我误会你了。试试下面的代码，让我知道它是否是你要找的。否则，您将需要更具体的需求。但是，您可能想查看这个流式布局，然后在其周围放置一个具有设定宽度的包装器 div。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Test</title>

    <style type="text/css">

            #bodyFull {
            }

            #header {
                    border: 3px solid #f00;
                    background-color: #99F;
                    width: 900px;
            }

            #footer {

                    border: 3px solid #909;
                    background-color: #F99;
                    width: 900px;

            }

            #leftNav {
                    float: left;
                    width: 150px;
                    height: 800px;
                    border: 2px solid #777;
                    background-color: #FF9;
            }

            #bodyContent {
                    float: left;
                    border: 2px solid #707;
                    background-color: #AAA;
                                            width:748px;
                    height: 1024px;
                                            overfloat:auto;
            }

            #mainBody {
                                            width:906px;
                                            overfloat: auto;
            }


    </style>

</head>

<body>

    <div id="bodyFull">

            <div id="header">
                    The Header
            </div>

            <div id="mainBody">

                    <div id="leftNav">
                            Left Nav
                    </div>

                    <div id="bodyContent">
                            The Body
                    </div>

                    The End of Main Body

            </div>
            <div style="clear: both"></div>
            <div id="footer">
                    The Footer
            </div>

    </div>

</body>

于 2009-07-10T19:47:36.610 回答