Question

我的div不符合他们父母的顶部。我认为这应该是自然发生的，没有任何额外的CSS命令。

这是一个正在发生的事情的例子。我给了所有divs边框，这样你就可以看到它们居中并且没有与顶部对齐。如果该信息有帮助，我也有这个砌体插件。

更新：

将所有边距和填充更改为0。它之前没有工作，我不知道为什么，也许没有妥善保存。这是一个包含更改的自包含页面。 p标记仍然较低，但我认为p标记是正常的。

这是一个包含的页面：http://advancedplaylabs.com/div_top_align.html

这是div

 <div class="main-container">
        <div class="main wrapper cleafix">

            <div id="content" class="container clearfix">

            <div class="item">
                <p style="border: 1px dashed green;">text here.text here.text here.text here.text here.text here.text here.text here.text here.text here.text here.text here.text here.text here.text here.text here.text here.text here.text here.text here.text here.text here.text here.text here.text here.text here. </p></div>

                                 </div>               

            </div>
  </div>

和继承人css

.main-container {
        position: relative; 
        top:0px;
        padding: 0px;
        margin: 0px:
             border: 1px dashed red;
    }

    .main {
        padding: 0px;
        margin: 0px:
    }

    #content {
        /*width: 980px;*/
        /*width: 95%;*/
        width: auto;
        margin: 0 auto;
        padding-top: 0px;
        border: 1px solid black;
    }

    .item {
        display: block;
        float: left;
        width: 300px;
        margin: 0 0 0px 0;
        padding: 0px;
        border: 1px solid aqua;
    }

Answer 1

如果您需要确保您的div与其父级的顶部对齐，我建议您只需检查div本身，以查找在您的div中无意/有意发生的可能位置或填充。

请注意，您的班级“item”div绝对位于id'content'div内，并且top属性设置为30px ...这会将其降低30 px。

有很多这样的事情发生了。你的内容类也有30px的填充，你的主要包装类有填充顶部5px ...

我可以继续，但我认为你可以在这里明确地跟随我：它不是自然发生的，它是有意的，它存在于你的main.css文件中。如果它不是故意的，那么它是被导入的，你需要覆盖你的div以获得适当的样式，或者手动修改main.css类。

如果您对此有更多疑问，请查看并告诉我。

编辑：

根据您希望将您的div与父母的顶部对齐，让我们特别注意我注意到的问题及其修复：

.main, #content { padding-top: 0; }
p { margin-top: 0; }

请注意，我从p中删除了margin-top，以便将我看到的所有元素与父母的顶部对齐。

如果您愿意，可以为特定元素下的所有div使用子选择器：

.main-container div { padding-top: 0; margin-top: 0; }

div不符合父母的顶部

1 个答案: