Question

问题是 div #content 的边框也出现在 div＃navigation 中？

<html>
    <head>
        <title>WUI</title>

        <style type="text/css">
            div#header {
            }

            div#navigation {
                float: left;
                padding-right: 20pt;
            }

            div#content {
                border: 5px groove;
            }
        </style>
    </head>

    <body>
        <div id="header">
            <h1>WUI</h1>
        </div>
        <br />
        <div id="navigation">
            <ul>
                <li>Home</li>
                <li>Login</li>
            </ul>
        </div>
        <div id="content">
            <p>I like when you ride with that booty on me!</p>
        </div>
    </body>
</html>

编辑：我希望左侧（导航）显示为左侧的侧边栏和之后的内容（右侧）。我将边框应用于内容，但该边框也出现在导航的 div 中。我希望现在很清楚。

Answer 1

overflow: auto;需要div#content。这是神奇的，因此不会给出任何解释：

        div#content {
            border: 5px groove;
            overflow: auto;
        }

好吧，在你编辑之后，我可以看到你的边框不是问题。我经常这样做：

html
{
  background-color: white;
}

body
{
  padding-left: 200px;
  background-color: green;
}

#navigation
{
  position: fixed;
  width: 200px;
  left: 0px;
  top: 0px;
}

它让你导航静态，内容只是神奇地工作。缺点是你必须使用基于像素的布局，我真的不喜欢这样做。这是你的选择。

这是我做了一段时间的半相关事情。看看它是否适合您：http://jsfiddle.net/dDZvR/12/

Answer 2

navigation是浮动的，这意味着它已从文档流中取出，并且下一个元素（content）向上移动以取代它。

但是，navigation仍然需要在某处浮动，因此它会占用 content内的空间。

为了避免这种情况，要么浮动content，要么在它上面留一个等于宽度navigation的边距。
看到你的编辑后，
编辑，我会说左边距的想法肯定会更好。

Answer 3

你需要为内容提供浮动，因为你给了导航浮动。使用这个例子：

    <style type="text/css">
        div#header {
        }

        div#navigation {
            float: left;
            padding-right: 20pt;
        }

        div#content {
            float: left;
            border: 5px groove;
        }
    </style>

Answer 4

这是因为花车的工作原理。你将不得不在#content或类似的东西上留下余量。

Answer 5

可以通过在div＃内容中添加左边距来更正。更正后的代码位于此处 - http://jsfiddle.net/sparky/vctcN/

Answer 6

你可以添加

float: left;

在内容中并自行设置宽度

Answer 7

这个可能有用：

WUI

    <style type="text/css">
        div#header {
            display:block;
        }

        div#navigation {
            width:150px;
            float:left;
        }

        div#content {
            border: 5px groove;
            margin-left:160px;
        }
    </style>
</head>

<body>
    <div id="header">
        <h1>WUI</h1>
    </div>


    <div id="navigation">
        <ul>
            <li>Home</li>
            <li>Login</li>
        </ul>
    </div>

    <div id="content">
        <p>I like when you ride with that booty on me!</p>
    </div>

</body>

跨越另一个div的CSS边框

7 个答案: