为什么这个div在这里创建一个换行符?

Question

我一直在尝试使这一段正确排列，但由于某种原因，包含副标题或下划线div 的 Div 取代了前几个单词。我尝试设置不同的位置并将它们包装在包含div 中，但它不会停止替换文本。

我在下面包含了我的 html 和 css，我不知道如何解决这个问题。

.concerned #subheading-container {
position: relative;
text-align: right;
right: 5.5%;
top: 10px;
}
.right-underline {
position: relative;
background: #B9D4EC;
width: 52.5%;
height: 2.75px;
float: right;
top: 7.5px;
}
.subheading-blue {
position: relative;
color: #2A5073;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 700;
font-size: 11.25px;
font-style: italic;
}
.paragraph-blue {
color: #2A5073;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 700;
font-size: 9.75px;
font-style: italic;
line-height: 120%;
}
#concerned-text-container {
position: relative;
width: 100%;
line-height: 0%;
/* height: 1000px; */
text-align: right;
top: 15%;
}
#dont-be {
position: relative;
text-align: right;
top: 10px;
}

<div class="concerned">
<div id="subheading-container">
<!-- Concerned? Heading -->
<h class="subheading-blue">Concerned About the Process?</h>
</div>
<div class="underline-container">
<!-- Blue Underline -->
<div class="right-underline">
</div>
<div id="concerned-text-container">
<!-- Don't worry text -->
<h class="paragraph-blue" id="dont-be">
The text
</h>
</div>
</div>

Answer 1

两个问题：

1. .concerned标记必须分配float()属性，而不是单独分配所有div属性。

2. 您的问题主要是由于.right-underline而发生的。如果您正在使用多个divs了解 DOM 结构总是有帮助的。

我已经修改了您的代码以将文本和div 对齐到右侧，但是请浏览代码中的注释以了解您的代码中存在哪些问题。

附言h标签不存在，您可能希望对标题使用h[1-6]标签。 您错过了关闭.right-underlinediv。

.concerned{
display: block;
float: right;
}

#subheading-container {
position: relative;
text-align: right;
/* right: 5.5%;       Causes a shift of the text towards center of the screen */
top: 10px;
}
.right-underline {
position: relative;
background: #B9D4EC;
width: 52.5%;
height: 2.75px;
top: 7.5px;
}
.subheading-blue {
position: relative;
color: #2A5073;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 700;
font-size: 11.25px;
font-style: italic;
}
.paragraph-blue {
color: #2A5073;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 700;
font-size: 9.75px;
font-style: italic;
line-height: 120%;
}
#concerned-text-container {
position: relative;
width: 100%;
line-height: 0%;
/* height: 1000px; */

/*text-align: right;      Aligns "The text" to page right*/
top: 15%;
}
#dont-be {
position: relative;
text-align: right;
top: 10px;
}

<div class="concerned">
<div id="subheading-container">
<!-- Concerned? Heading -->
<h class="subheading-blue">Concerned About the Process?</h>
</div>
<div class="underline-container">
<!-- Blue Underline -->
<div class="right-underline">
</div>
<div id="concerned-text-container">
<!-- Don't worry text -->
<h class="paragraph-blue" id="dont-be">
The text
</h>
</div>
</div>

Answer 2

尽管 html 中没有标签，并且您有一个未闭合<的div>-tag，但还是会创建换行符，因为您已将右下划线设置为向右浮动，固定宽度为 52.2%。

我不确定你到底想做什么，但如果你去掉你的浮标，你的话就不会再被取代

了