代码之家 › 专栏 › 技术社区 › InDaPond

为什么我的专栏的内容从不同的高度开始?

css-multicolumn-layout css3 css html

InDaPond · 技术社区 · 6 年前

我读到,人们不应该使用表格作为布局的手段,而应该使用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)标记的答案是对我的改进,但我仍然认为它是非必然的,因为它使用默认的弹性流,将主轴置于水平位置。
从逻辑的角度来看,应该是tho列。

因此,这里有一个更新的解决方案,它是最简单和直观的(至少在我看来):

.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>

3 回复 | 直到 6 年前

MW_dev 6 年前

你的问题是利润率在 p 元素,就像垂直堆叠分隔符一样。 See Johannes answer .

不过,你的概念有缺陷。你可能想把等级和技能联系起来

ul.skill-explanation {
  list-style: none;
  padding-left: 0;
}

.skill-item {
  display: flex;
}

.skill-item > div {
  width:50%;
}

.rating {padding-right: 0.5em; 
text-align:right;
}

<ul class="skill-explanation">
  <li class="skill-item">
    <div class="rating">&#9733;&#9734;&#9734;&#9734; &#8210;</div>
    <div class="skill">I can put it into context and am able to use it's basics</div>
  </li>
  <li class="skill-item">
    <div class="rating">&#9733;&#9733;&#9734;&#9734; &#8210;</div>
    <div class="skill">intermediate knowledge, used several times</div>
  </li>
  <li class="skill-item">
    <div class="rating">&#9733;&#9733;&#9733;&#9734; &#8210;</div>
    <div class="skill">good undestanding, used frequently</div>
  </li>

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

Johannes 6 年前

您可以添加 padding: 1px 0 到两个容器 .align-left 和 .align-right . 这样,默认的上下页边距 p 标签保留在容器中,不会由于像代码笔那样折叠页边距而导致任何垂直偏移。

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

KJEK-Code 6 年前

编辑如果您想使用已有的代码。从设置为浏览器的段落“p”标记中删除边距。然后将线条高度设置为所需高度。
原始答案
如果你想很容易地把物品排成一行的话,你会想要使用像flexbox这样的东西。您可能还需要设置行高,以便确保Unicode图标和文本正确对齐。
这将允许您完全控制文本和图标的对齐位置。 More info on flexbox at W3schools

p{
  margin: 0;
  line-height: 1.5em;
}

flex box示例:

.skill-explanation {
  display: flex;
  align-items: center;
}
.align-left, .align-right {
  line-height: 1.5rem;
}

.skill-explanation {
  display: flex;
  align-items: center;
}
.align-left, .align-right {
  line-height: 1.5em;
}

<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>

但是你最好像别人建议的那样重新访问你的HTML代码并把它列成一个列表,因为这样做在语义上更正确,也更容易维护。

  <ul>
    <li>&#9733;&#9734;&#9734;&#9734; &#8210; I can put it into context and am able to use it's basics</li>
    <li>&#9733;&#9733;&#9734;&#9734; &#8210; intermediate knowledge, used several times</li>
    <li>&#9733;&#9733;&#9733;&#9734; &#8210; good undestanding, used frequently</li>
    <li>&#9733;&#9733;&#9733;&#9733; &#8210; deep understanding, used on a daily basis</li>
  </ul>