当元素下方有另一个元素时，将元素内的文本向左对齐时出现问题

Question

我看到一个奇怪的问题，即

contentDescription

内的文本没有与最后一句的左侧对齐。这是我注意到的问题的图片。 示例。 正如您所看到的，文本“某个星球”并未像我预期的那样向左对齐。

这是因为它下面的

saidBy

元素吗？此外，这种行为非常不一致，因为有时它会正确地向左对齐，具体取决于文本的长度。

我尝试应用

text-align: left;

，但没有用。

这是我的代码：

.mainBody{
  width: 570px;
}
.saidBy{
   margin-top: 22px;
   float: left;
}

<div class="mainBody">
    <div class="content">
        <blockquote class="contentDescription">A planet is a large object that orbits a star and has enough gravity to be spherical and clear its orbit of smaller objects. Here are some facts about some planet
            <cite class="saidBy">
                —From National Aeronautics and Space Administration
            </cite>
        </blockquote>
    </div>
</div>

Answer 1

这很奇怪，我同意。如果替换 float: left;按显示：块；它似乎表现得像你想要的那样。

浮动元素推到引用最后一行的原因是它是引用的一部分。它想要留下，所以最后一行没有其他地方可去。

.mainBody{
  width: 570px;
}
.saidBy{
   margin-top: 22px;
   display: block;
}

<div class="mainBody">
    <div class="content">
        <blockquote class="contentDescription">A planet is a large object that orbits a star and has enough gravity to be spherical and clear its orbit of smaller objects. Here are some facts about some planet
            <cite class="saidBy">
                —From National Aeronautics and Space Administration
            </cite>
        </blockquote>
    </div>
</div>