html - CSS 的多列、多行格式问题

Question

我在理解/实现某些 CSS 格式设置时遇到问题。在这个例子中，Span 管理的笔记和下面的文本之间的间距会根据最后一个笔记的长度而变化。注释范围在第二行有效地扩展到它自己的空白区域，并开始在第三行的后续文本上运行。我确定我的问题出在 CSS 中，但我似乎无法理解问题所在。

section.px_update {
  margin-bottom: 0em;
}

.px_update_container {
  margin-bottom: 2em;
  position: relative;
  width: 100%;
}

.px_upd_note_num {
  display: inline-block;
  position: absolute;
  left: 2em;
  width: 1em;
}

.px_upd_note_note {
  display: inline-block;
  position: absolute;
  left: 3em;
  width: 70em;
}

<section class="px_update">
  <div class="px_update_container">
    <span class="px_upd_note_num">NOTES</span>
    <span class="px_upd_note_num">1</span><span class="px_upd_note_note">Short note:</span>
  </div>
  Following text
</section>
&nbsp;
<section class="px_update">
  <div class="px_update_container">
    <span class="px_upd_note_num">NOTES</span>
    <span class="px_upd_note_num">1</span><span class="px_upd_note_note">Long note: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>
  </div>
  Following text
</section>

显然，还有一些 CSS 是从我正在运行的 WordPress 主题继承而来的，问题可能就在那里，但我猜我的问题出在我的显示设置上，或者是在使用 Spans 上。因此，希望获得有关如何获得任意列宽和缩进的一些建议，这也允许在第二列中包含多行。我正在呈现非常密集的数据，有时在 5 列或更多列中，因此我需要比基本的 HTML 格式化工具做得更好。我的猜测是该解决方案会教会我一些我也需要了解的关于 CSS 的知识。

Answer 1

我认为这是因为您的代码中的 position:absolute css。这就是文本相互重叠的原因。我对您的代码做了一些更改。

这是更新后的 CSS:

section.px_update {
  margin-bottom: 0em;
}

.px_update_container {
  margin-bottom: 2em;
  position: relative;
  width: 100%;
  display:flex;
}

.px_upd_note_num {
  width: 5em;
}

.px_upd_note_note {
  width: 70em;
}

<section class="px_update">
  <div class="px_update_container">
    <span class="px_upd_note_num">NOTES</span>
    <span class="px_upd_note_num">1</span><span class="px_upd_note_note">Short note:</span>
  </div>
  Following text
</section>
&nbsp;
<section class="px_update">
  <div class="px_update_container">
    <span class="px_upd_note_num">NOTES</span>
    <span class="px_upd_note_num">1</span><span class="px_upd_note_note">Long note: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>
  </div>
  Following text
</section>