主页 / coding / 问题 / 79493317
Accepted
lm.
Asked: 2025-03-08 03:34:57 +0800 CST

html 中的两列文本未正确对齐

  • 772

我正在尝试格式化 html，使文本按 2 列格式化。我尝试按如下方式进行操作：

.content {
    column-count: 2;
    column-gap: 10px; /* Space between the columns */
}
body {
  counter-reset: section;      
}
p:before {
  counter-increment: section;        
  content: "" counter(section) ": "; 
}
<div class="content"> 
  <p>this is the first paragraph of text.</p>
  <p>this is the second paragraph of text.</p>
  <p>this is the third paragraph of text.</p>
  <p>this is the fourth paragraph of text.</p>
  <p>this is the fifth paragraph of text.</p>
  <p>this is the sixth paragraph of text.</p>
</div>

但是当我在浏览器中打开此文件时，我看到文本被分成 2 列，但 2 列之间的行未垂直对齐（如屏幕截图所示）：。在此处输入图片描述我需要做的是 - 示例页面上的第 1 行和第 4 行的高度相同。尝试使用 flex，但它导致文本被分成 2 列以上。样式中缺少什么？提前致谢

html

1 个回答

  1. Best Answer

    margin-top删除段落元素的默认设置：

    p {
  margin-top: 0;
}

.content {
  column-count: 2;
  column-gap: 10px;
  /* Space between the columns */
}

body {
  counter-reset: section;
}

p:before {
  counter-increment: section;
  content: "" counter(section) ": ";
}
    <div class="content">
  <p>this is the first paragraph of text.</p>
  <p>this is the second paragraph of text.</p>
  <p>this is the third paragraph of text.</p>
  <p>this is the fourth paragraph of text.</p>
  <p>this is the fifth paragraph of text.</p>
  <p>this is the sixth paragraph of text.</p>
</div>

    • 3

相关问题