Question

我在使用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，问题可能在那里，但是我的猜测是我的问题出在我的显示设置或使用Span。因此，希望获得有关如何获取任意列宽和缩进的建议，这也允许第二列中包含多行。我呈现的数据非常密集，有时会显示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>

CSS的多列，多行格式设置问题

1 个答案: