Question

我有一个基本的HTML，显示广播中使用的安全区域。但是，当我向我设置的div添加文本时，它会使对齐不合适。

代码：

<!DOCTYPE html>
<html>
    <head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="browserClock.css">
</head>
<body>
    <div id="safeAction">Safe Action Area
        <div id="safeText">Safe Text Area
        </div>
    </div>
</body>
</html>

html {
    width: 1920px;
    height: 1080px;
    margin: 0;
    padding: 0;
    background-color: black;
}
body {
    margin: 0;
    width: 100%;
    height: 100%;
    background-position: 0 0;
}
#safeAction {
    width: 1786px;
    height: 1003px;
    margin: 37px 66px 37px 66px;
    border: 1px dashed white;
}
#safeText {
    width: 1728px;
    height: 971px;
    margin: 16px 28px 16px 28px;
    border: 1px dotted white;
}

没有文本，它按照EBU标准像素间距排列。有了文字，它没有。

Answer 1

这种情况正在发生，因为标识为safeText的内部div相对于其所在的div的其他内容而定位。要解决此问题，请将safeText的位置设置为绝对并使用{{ 1}}设置从内部div的顶部到外部div的顶部（在您的情况下为16px）而不是顶部边距的距离。最后，给予身体相对定位，以便确定父母。

JSFiddle

top

如何在向父项添加文本时阻止子div移动？

1 个答案: