时间戳

首页 > 解决方案 > CSS 的多列、多行格式问题

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

问题描述

我无法理解/使用 CSS 实现某些格式。在此示例中，跨度管理的音符和下面的文本之间的间距会根据最后一个音符的长度而变化。注释跨度有效地扩展到它自己的第二行空白处，并开始在第三行的以下文本上运行。我确定我的问题出在 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>

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

标签： htmlcss

解决方案

我认为这是因为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>

推荐阅读