我读到不应该使用表格作为布局方式,而应该使用 CSS 进行所有样式设置,所以我尝试了我能想到的最基本的方法来模仿表格,使用 CSS multi -列布局。
我创建了一个 CodePen来说明问题。如您所见,两列内容的起始高度不同,我不明白为什么。
.skill-explanation {
-webkit-column-count: 2;
-moz-column-count: 2;
-ms-column-count: 2;
column-count: 2;
}
.align-left {
text-align: left;
}
.align-right {
text-align: right;
}
<div class="skill-explanation">
<div class="align-right">
<p>★☆☆☆ ‒ <br>
★★☆☆ ‒ <br>
★★★☆ ‒ <br>
★★★★ ‒
</p>
</div>
<div class="align-left">
<p>I can put it into context and am able to use it's basics <br>
intermediate knowledge, used several times <br>
good undestanding, used frequently <br>
deep understanding, used on a daily basis
</p>
</div>
</div>
我想对这篇文章进行更新,以防有人无意中发现它。
1) 标记的答案是我的改进,但我仍然觉得它不直观,因为它使用默认的 flex 流,将主轴放在水平方向上。
从逻辑的 Angular 来看,这应该是列。
因此这里有一个更新的解决方案,这是最简单直观的(至少在我看来):
.center-wrapper {
margin: 0 auto;
display:table;
}
.skill-explanation {
list-style: none;
}
.rating {
}
.skill {
}
.skill-item {
list-style: none;
}
<div class="center-wrapper" <ul class="skill-explanation">
<li class="skill-item">
<span class="rating">★☆☆☆ ‒</span>
<span class="skill">I can put it into context and am able to use it's basics</span>
</li>
<li class="skill-item">
<span class="rating">★★☆☆ ‒</span>
<span class="skill"></span>
intermediate knowledge, used several times
</li>
<li class="skill-item">
<span class="rating"> ★★★☆ ‒</span>
<span class="skill"></span>
good undestanding, used frequently
</li>
<li class="skill-item">
<span class="rating">★★★★ ‒</span>
<span class="skill"></span>
deep understanding, used on a daily basis
</li>
</ul>
</div>
最佳答案
可以在.align-left
和.align-right
这两个容器中添加padding: 1px 0
。这样一来,p
标签的默认顶部和底部边距就保留在它们的容器内,不会像您的 codepen 那样由于折叠边距而导致任何垂直偏移。
关于html - 为什么我的专栏内容从不同的高度开始?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54525049/