时间戳

首页 > 解决方案 > 为什么我的列的内容从不同的高度开始？

html - 为什么我的列的内容从不同的高度开始？

问题描述

我读到不应该使用表格作为布局手段，而是使用 CSS 进行所有样式设置，所以我尝试了我能想到的最基本的东西来模仿表格，即使用 CSS 多列布局。

我创建了一个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>&#9733;&#9734;&#9734;&#9734; &#8210; <br>
    &#9733;&#9733;&#9734;&#9734; &#8210; <br> 
    &#9733;&#9733;&#9733;&#9734; &#8210; <br> 
    &#9733;&#9733;&#9733;&#9733; &#8210;
   </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 流，它将主轴置于水平位置。
从逻辑的角度来看，这应该是列。

因此，这是一个更新的解决方案，它是最简单和直观的（至少在我看来）： 

.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">&#9733;&#9734;&#9734;&#9734; &#8210;</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">&#9733;&#9733;&#9734;&#9734; &#8210;</span>
    <span class="skill"></span>
    intermediate knowledge, used several times
  </li>
  <li class="skill-item">
    <span class="rating"> &#9733;&#9733;&#9733;&#9734; &#8210;</span>
    <span class="skill"></span>
    good undestanding, used frequently
  </li>

  <li class="skill-item">
    <span class="rating">&#9733;&#9733;&#9733;&#9733; &#8210;</span>
    <span class="skill"></span>
    deep understanding, used on a daily basis
  </li>
  </ul>
</div>

标签： htmlcsscss-multicolumn-layout

解决方案

您可以添加padding: 1px 0到两个容器.align-left和.align-right. 这样，p标签的默认顶部和底部边距将保留在其容器内，不会由于像您的 codepen 中那样折叠边距而导致任何垂直偏移。

https://codepen.io/anon/pen/YBxWbY

推荐阅读