Question

请查看CSS和HTML视图的这个小提琴Here。

代码是：

<body>
    <div class="header-bar" id="header-bar">
        <div class="title-bar" id="title-bar">
            <table id="header-table" class="header-table" width="100%">
                <tr>
                    <td>
                        <div class="site-title" id="site-title">Site Title</div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="site-tagline" id="site-tagline">Site Tagline</div>
                    </td>
                </tr>
            </table>
        </div>
        <div class="header-login-bar" id="header-login-bar">
            <div class="header-login-form" id="header-login-form">  
              <table>
                    <tr>
                        <th>Name</th>
                        <td><input type="text" name="user-email"/></td>
                    </tr>
                    <tr>
                        <th>Password</th>
                        <td><input type="password" name="user-pass"/></td>
                    </tr>
                </table>
            </div>
            <div class="header-logged-in" id="header-logged-in">
                Welcome {$user}.
                <a href="#">Dashboard</a>
                <a href="#">Logout</a>
            </div>      
        </div>
    </div>
    <div id="content-bar" class="content-bar">
        This is the content part
    </div>
</body>

带有标题栏的div必须包含此段中绘制的所有元素，但我无法理解为什么，此段拒绝表现。我是设计新手，使用更多像Dreamweaver这样的图形工具来创建代码和设计视图来制作这些东西，即使在那里内容也是错误的。在浏览器中，带有标题栏的div根本不显示任何文本。 id为header-bar的div在Chrome的Inspect Element中报告高度为0px。

Answer 1

将overflow:auto添加到标题栏div。当任何元素的子元素浮动时，它们将从文档的正常流中移除，这就是为什么标题栏div报告高度为零的原因。将overflow:auto添加到父div（标题栏）可恢复预期的行为。

<强> jsFiddle example

为什么元素不会留在<div>？</div>中

1 个答案: