Html 文本会干扰元素的定位_Html_Css

Html 文本会干扰元素的定位

html css

Html 文本会干扰元素的定位,html,css,Html,Css,任务是组成以下布局：我做到了。但当我尝试向块中添加文本时，我发现了这个问题：元素的定位被打破了，我不明白是什么原因。守则： HTML <!DOCTYPE html> <html lang="en"> <head> <title>Test</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="

任务是组成以下布局：

我做到了。但当我尝试向块中添加文本时，我发现了这个问题：

元素的定位被打破了，我不明白是什么原因。守则：

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Test</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
    <section class="content">
        <div class="main">
            <code class="description">&lt;Section&gt;</code>
        </div>
        <aside class="attachment">
            <div class="first">
                <code class="description">&lt;Aside 1&gt;</code>
            </div>
            <div class="second">
                <code class="description">&lt;Aside 2&gt;</code>
            </div>
        </aside>
    </section>
</body>

我还试图移除附件的第二块，然后元素被正确定位。我知道有很多其他的方法来组成这个布局。但我真的想知道这个错误的原因是什么。我的问题需要帮助。

您可以使用此代码，但您可以阅读此代码来解决问题

.content{
宽度：自动；
高度：自动；
利润率：20px；
显示器：flex；
对齐项目：居中
}
梅因先生{
显示：内联块；
宽度：600px；
高度：700px；
边界半径：5%；
边框：2个实心#849942；
背景#8aab26；
右边距：150px；
文本对齐：居中；
}
.附件{
宽度：600px；
高度：700px；
显示器：flex；
弯曲方向：立柱；
调整内容：之间的间距
}
.附件.第一{
显示：内联块；
宽度：60%；
身高：45%；
边界半径：5%；
边框：2个实心#849942；
背景#8aab26；
利润底部：10%；
文本对齐：居中；
}
附件二{
显示：内联块；
宽度：60%；
身高：45%；
边界半径：5%；
边框：2个实心#849942；
背景#8aab26；
文本对齐：居中；
}
.说明{
位置：相对位置；
字号：1.5em；
最高：45%；
}


试验
部分
1
2

您可以使用此代码，但您可以阅读此代码来解决您的问题

.content{
宽度：自动；
高度：自动；
利润率：20px；
显示器：flex；
对齐项目：居中
}
梅因先生{
显示：内联块；
宽度：600px；
高度：700px；
边界半径：5%；
边框：2个实心#849942；
背景#8aab26；
右边距：150px；
文本对齐：居中；
}
.附件{
宽度：600px；
高度：700px；
显示器：flex；
弯曲方向：立柱；
调整内容：之间的间距
}
.附件.第一{
显示：内联块；
宽度：60%；
身高：45%；
边界半径：5%；
边框：2个实心#849942；
背景#8aab26；
利润底部：10%；
文本对齐：居中；
}
附件二{
显示：内联块；
宽度：60%；
身高：45%；
边界半径：5%；
边框：2个实心#849942；
背景#8aab26；
文本对齐：居中；
}
.说明{
位置：相对位置；
字号：1.5em；
最高：45%；
}

试验
部分
1
2
您可以将垂直对齐
属性添加到.main
元素中

/*内容*/
.内容{
宽度：自动；
高度：自动；
利润率：20px；
}
梅因先生{
显示：内联块；
宽度：600px；
高度：700px；
边界半径：5%；
边框：2个实心#849942；
背景#8aab26；
右边距：150px；
文本对齐：居中；
垂直对齐：顶部；
}
.附件{
显示：内联块；
宽度：600px；
高度：700px；
}
.附件.第一{
显示：内联块；
宽度：60%；
身高：45%；
边界半径：5%；
边框：2个实心#849942；
背景#8aab26；
利润底部：10%；
文本对齐：居中；
}
附件二{
显示：内联块；
宽度：60%；
身高：45%；
边界半径：5%；
边框：2个实心#849942；
背景#8aab26；
文本对齐：居中；
}
.说明{
位置：相对位置；
字号：1.5em；
最高：45%；
}

试验
部分
1
2
您可以将垂直对齐
属性添加到.main
元素中

/*内容*/
.内容{
宽度：自动；
高度：自动；
利润率：20px；
}
梅因先生{
显示：内联块；
宽度：600px；
高度：700px；
边界半径：5%；
边框：2个实心#849942；
背景#8aab26；
右边距：150px；
文本对齐：居中；
垂直对齐：顶部；
}
.附件{
显示：内联块；
宽度：600px；
高度：700px；
}
.附件.第一{
显示：内联块；
宽度：60%；
身高：45%；
边界半径：5%；
边框：2个实心#849942；
背景#8aab26；
利润底部：10%；
文本对齐：居中；
}
附件二{
显示：内联块；
宽度：60%；
身高：45%；
边界半径：5%；
边框：2个实心#849942；
背景#8aab26；
文本对齐：居中；
}
.说明{
位置：相对位置；
字号：1.5em；
最高：45%；
}

试验
部分
1
2

/* Content */
.content {
    width: auto;
    height: auto;
    margin: 20px;
}

.main {
    display: inline-block;
    width: 600px;
    height: 700px;

    border-radius: 5%;
    border: 2px solid #849942;
    background: #8aab26;

    margin-right: 150px;
    text-align: center;
}

.attachment {
    display: inline-block;
    width: 600px;
    height: 700px;
}

.attachment .first {
    display: inline-block;
    width: 60%;
    height: 45%;

    border-radius: 5%;
    border: 2px solid #849942;
    background: #8aab26;

    margin-bottom: 10%;
    text-align: center;
}

.attachment .second {
    display: inline-block;
    width: 60%;
    height: 45%;

    border-radius: 5%;
    border: 2px solid #849942;
    background: #8aab26;

    text-align: center;
}

.description {
    position: relative;
    font-size: 1.5em;
    top: 45%;
}