Question

我有一个位置设置为固定的div容器。当我尝试在此div标记内添加内容时，内容从标记的底部开始，而不是在顶部。

#toolbox{
    width: 300px;
    height: 400px;
    position: fixed;
    top: 250px;
    background-color: grey;
    z-index: 1;
}
#secondary{
    position: relative;
    margin: 0px;
    padding:0px;
    height: 10px;
    width:10px;
}

我的HTML看起来像

<div id="toolbox">
     <span id="secondary">Test</span>
</div>

文本'Test'出现在工具箱的底部。如果我添加多个元素，如单选按钮或其他div标签（并在工具箱中将溢出设置为auto），则元素在工具箱本身内形成一个大页面。

添加源代码：

<html>
<head>
    <title>Crisper</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
    <link href="styles.css" rel="stylesheet" />
</head>

<body onload="start()">
    <header>
        <h1>Test Util</h1>

        <input type="file" name="file" id="file" class="inputfile" />
    </header>
    <hr>

    <div id="dropbox">
        <div id="toolbox">
            <span id="secondary">Res</span>
        </div>
        <img id="canvas" src="https://upload.wikimedia.org/wikipedia/commons/c/ce/Transparent.gif" >
    </div>

    <hr>
    <footer>
        <button id="download-butotn">Download</button>
    </footer>
</body>

CSS：

#dropbox {
    min-height: 70%;
    text-align: center; 
}

img{
    min-height: 500px;
    min-width: 500px;
    position: relative;
    margin: auto auto auto auto;
}

#toolbox{
    width: 300px;
    height: 400px;
    position: fixed;
    top: 250px;
    background-color: grey;
    z-index: 1;

}

#secondary{
    position: absolute;
    height: 100px;
}

Answer 1

有多种可能的原因。但是，您提供的代码不包含任何代码。以下是一些常见的内容：

它有bottom: 0;
它有一组height和显示规则，使其子项与底部对齐（即：display:flex;flex-direction:column;justify-content: flex-end;）
它有padding-top，margin-top或top。

注1：最可能的原因是 1。
注2：在高父母中，还有多种其他方法可以将儿童与底部对齐。（的 2 ）

如果以上都没有帮助，您必须提供一个最小，完整且可验证的示例。

Answer 2

我通过javascript设置行高，这导致了偏移量。只需重写CSS文件中行高度属性的值即可完成这项工作。

嵌套div样式偏移

2 个答案: