html - 我的一个段落不会向左浮动以与其他段落保持一致

Question

第一次在这里发帖，但我在寻找答案时无数次使用过这个网站，所以希望能为我提供另一个。

我的问题如下:

我一直在尝试让所有文本向左浮动并对齐(标题、作者、描述)但是，时间似乎不想向左浮动以与其余部分相匹配。当指向“向左浮动”时，“14 小时前”只会走那么远(如图所示)

这是我的 html 和 css:

HTML and CSS

The Problem

我是 HTML 和 CSS 的新手，最近才开始自学，所以非常感谢任何帮助，如果这是一个愚蠢的问题，请提前道歉哈哈!

Answer 1

首先，不要将 block 元素放在行元素中。在你的情况下，你想把 <p>标签内 <span> .始终尽量避免它，即使您可以通过 css 对其进行调整。

那么您可能误解了 float 和文本对齐。在我看来，文本对齐应该是进入此处的方式。

老实说，我会重新编写您的 HTML，一个包装元素，如 或

以及两个具有类来设置其颜色的内部元素可能会更好。

所以我建议这样:

<div class="news-section">
  <img src="..." alt="..." />
  <h3>Your news title</h3>
  <div class="header">
    <span class="author">John Doe</span><span class="time">10 hours ago</span>
  </div>
</div>

然后只需为作者和时间类别设置颜色和字体大小......如果我从你的问题中得到正确的话。