Question

所以我尝试在我正在研究的项目中使用它，并试图在一个孤立的项目中重新创建它，看看我是否可以消除我没有看到的因素。这里有一些屏幕抓图，但我想使用＆＃34; Padding-top＆＃34; css以对齐列文本。出于某种原因，它不会起作用。任何帮助都会很棒。谢谢大家。

HTML Code

CSS Code

Answer 1

您在第一列顶部获取该空格的原因是空h1元素以及<p>元素上的边距。将您的h1移到.level之外，并从<p>元素中移除任何边距，您的两列将会对齐。

编辑：我猜你的意思是“神秘的东西”是你h1的内容，而不是班级名字......？

.level{columns:2;}
.level p{margin:0;}

<h1 class="Something of a Mystery"></h1>
    <div class="level">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus venenatis tempus molestie. Etiam dictum risus quis nibh ullamcorper, quis pulvinar tellus vulputate. Fusce consectetur et dui sed lobortis. Suspendisse luctus risus a nibh lacinia, vel ultricies mi faucibus. In interdum, odio ac faucibus tempor, elit velit fringilla turpis, eget posuere tortor sapien vel lorem.m</p>
    </div>

Answer 2

列的属性（在单个属性中设置column-width和column-count属性的简写属性）。 column-count是元素的内容应流入的列数。

/* Column count */
columns: auto;
columns: 2;

您只需要在段落元素上设置列属性（此处仅列列数）而不是使用类级别设置div，因为您只需要拆分段落元素。现在，您可以设置此段落元素的填充顶部

.level p {
    columns :2;
 }

有关列属性的更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/columns

对齐列中的段落文本

2 个答案: