Question

真的无法弄清楚它有什么问题，但是我添加到div中的所有内容都会消失，就像它不在其中一样。

在此处查看：JSFiddle！

HTML ___

<div id="wrapper">
    <div id="container">
        <div id="header">
            <div id="logo">
                TEXT GOES OUTSIDE OF DIV :'((
            </div>
        </div>
    </div>
</div>

CSS ___

#container {
    width: 960px;
    margin: 20px auto 0 auto;
    background: yellow;
}

#header {
    position: relative;
    width: 100%;
    background: yellow;
    border: 1px solid black;
    padding: 2px; /*just to see the div*/
}

#logo {
    float: left;
}

Answer 1

你需要清除你的花车：

<div id="wrapper">
    <div id="container">
        <div id="header">
            <div id="logo">
                TEXT NOW APPEARS INSIDE DIV :)
            </div>
            <div style="clear: both;"></div>
        </div>
    </div>
</div>

因为你已经浮动了你的徽标，所以它后面的任何内容都会环绕它。这就是造成你所看到的效果的原因。

Answer 2

将overflow:auto添加到#header div以恢复预期的行为：

#header {
    position: relative;
    width: 100%;
    background: yellow;
    border: 1px solid black;
    overflow:auto;
}

<强> jsFiddle example

浮动孩子基本上将其从流中移除并且父级折叠。添加溢出规则可以为您提供预期的行为。

Answer 3

我建议您使用flex。它非常强大，可让您创建所需的任何布局，而不会出现任何实际问题。我在右侧添加了一个菜单，目的只是为了在实际环境中说明您的徽标。

<!-- HTML -->
<div id="wrapper">
    <div id="container">
        <div id="header">
            <div id="logo">
                TEXT GOES OUTSIDE OF DIV :'((
            </div>
            
             <div id="content-menu">
                 <div id="menu">
                   <a href="#">Home</a>
                   <a href="#">Contact</a>
                   <a href="#">About</a>
                   <a href="#">About</a>
                 </div>
             </div>
        </div>
    </div>
</div>

对应的CSS：

/* CSS */
#container {
    width: 960px;
    margin: 20px auto 0 auto;
    background: yellow;
}

#header {
    position: relative;
    width: 100%;
    margin: 1.2em auto;
    background: yellow;
    border: 1px solid black;
    padding: 2px; /*just to see the div*/
    display: flex;
}

#logo { flex: 1; }

#content-menu { flex: 4;}

#menu { display: flex; }

#menu > a {
  display: inline-block;
  text-align: center;
  line-height: 32px;
  text-decoration: none;
  color: #000;
  flex: 1;
}

内容超出了div

3 个答案: