无法理解 div 的工作原理答案

【问题标题】：Trouble understanding how divs work无法理解 div 的工作原理
【发布时间】：2014-03-14 20:23:16
【问题描述】：

我在两个浮动 div（一个向左浮动，另一个向右浮动）下方有一个 div。当我打开元素检查器时，我发现了一些奇怪的东西。为什么下面的 div 具有 css 属性clear: both 与前两个重叠？此外，当我更改 div 的高度时，元素检查器显示 div 不再包含其内容。这是两个屏幕截图来说明我的意思。代码在截图下方。

没有在 css 中设置高度：

类“标签”的高度在 css 中设置为 200px：

HTML for page

CSS for page

【问题讨论】：

我在您的.tags div 上没有看到“清晰”的样式。
今天白痴奖给了我。我可以发誓我把它放在那里，因为它把 div 的内容放在其他两个下面，但我想这只是因为没有空间可以粘贴这些元素，所以它只是把它们放在另外两个 div 的下面。那么div的大小默认是由它的内容决定的？
默认情况下，一个 div 是 100% 宽和尽可能高以适应内容。当您浮动它们时，宽度将折叠到内容的宽度。

标签： css html css-float

【解决方案1】：

您的 CSS 中有语法错误。您在其他类中有一些无法使用的类，并且还有一些未闭合的括号。我把它固定在下面

        #container {
        width: 900px;
        min-height: 500px;
        margin: auto;
        background: #DDDDDD;
        }


        .entry {
        border-top: 1px solid black;
        border-bottom: 1px solid black;
        }


        .title {
        text-align: center;
        }

        .name {
        padding: 0px 10px;
        }

        .tag {
        display: inline-block;
        }

        .link {
        border: 1px solid black;
        display: inline-block;
        padding: 10px;
        text-decoration: none;
        }

        .info {
        width: 610px;
        margin: auto;
        }

        .input-text_area {
        width: 300px;
        height: 250px;
        padding: 0;
        border: none;
        resize: none;
        }

        .input-text_field {
        width: 300px;
        padding: 0;
        margin: 0;
        border: none;
        }

        .input-button {
        width: 75px;
        height: 50px;
        margin: 2px 0px;
        display: block;
        float: right;
        }

        select {
        float: right;
        margin: 0px;
        }

        .right_half {
        float: left;
        padding: 1px;
        height: 300px;
        width: 300px;
        }

        .left_half {
        float: left;
        padding: 1px;
        height: 300px;
        }

        .tags {
        height: 200px;
        }
        label {
        display: block;
        }

        .text_field {
        width: auto;
        }


        .block-label {
        display: block;
        }

【讨论】：