带段落的内联块不断跳转

Question

我正在尝试让 3 个框彼此相邻并输入文本。到目前为止，我已经正确设置了框。但是当我添加文本时，它会上下跳动。当我在 div 中输入相同数量的段落标签时，它们全部对齐。但是当一个 div 有 1 个段落标记而其他有 2 个时，它们不再对齐。我不确定如何解决这个问题。

JSFIDDLE：https://jsfiddle.net/gegc8nuk/

.row {
  max-width: 1140px;
  margin: 0 auto;
}
section {
  padding: 80px 0;
}
.wrap {
  display: table;
  /* Webkit Fix */
  width: 100%;
  /* set width to stop display table shrink to fit */
  word-spacing: -1em;
  /* hide whitespace nodes (not in webkit) - will never overlap even if zoomed */
}
.tox {
  display: inline-block;
  height: 200px;
  width: 100%;
  word-spacing: 0;
  color: #fff;
  padding: 5%;
  /* reset parent */
}
.red {
  background-color: #9a0000;
}
.green {
  background-color: #4ce215;
}
.blue {
  background-color: #240fc3;
}

<section>
  <div class="row">
    <div class="wrap">
      <div class="tox red span-1-of-3">
        <p>Hello</p>
      </div>
      <div class="tox green span-1-of-3">
        <p>Hello</p>
      </div>
      <div class="tox blue span-1-of-3">
        <p>Hello</p>
        <p>Hello</p>
        <p>Hello</p>
      </div>
    </div>
  </div>
</section>

Answer 1

如果使用一次display:table；你为什么不对孩子使用 table-cells？

https://jsfiddle.net/gegc8nuk/1/

.row {
  max-width: 1140px;
  margin: 0 auto;
}
section {
  /*padding: 80px 0;*/
}
.wrap {
  display: table;     
  width: 100%;
  /* set width to stop display table shrink to fit 
   word-spacing: -1em;
  hide whitespace nodes (not in webkit) - will never overlap even if zoomed */
}
.tox {
  display: table-cell;
  /* height: 200px; */
  /*width: 100%;
  word-spacing: 0;*/
  color: #fff;
  padding: 5%;
  /* reset parent */
}
.red {
  background-color: #9a0000;
}
.green {
  background-color: #4ce215;
}
.blue {
  background-color: #240fc3;
}

<section>
  <div class="row">
    <div class="wrap">
      <div class="tox red span-1-of-3">
        <p>Hello</p>
      </div>
      <div class="tox green span-1-of-3">
        <p>Hello</p>
      </div>
      <div class="tox blue span-1-of-3">
        <p>Hello</p>
        <p>Hello</p>
        <p>Hello</p>
      </div>
    </div>
  </div>
</section>

Answer 2

在 css 中，您已将 tox 设置为 100% 宽度，同时保持 inline-block，同时将 wrap 应用为 display: table;。两者不同。您可以执行以下操作：

编辑您的CSS：

.wrap {
    display: block;
    /* Webkit Fix */
    width: 100%;
    /* set width to stop display table shrink to fit */
    word-spacing: -1em;
    /* hide whitespace nodes (not in webkit) - will never overlap even if zoomed */
}
.tox {
    display: inline-block;
    height: 200px;
    width: 33.333%;
    padding: 10px;
    word-spacing: 0;
    color: #fff;
    vertical-align: top;
    box-sizing: border-box;
    /* reset parent */
}

Fiddle: https://jsfiddle.net/debraj/gegc8nuk/2/

带段落的内联块不断跳转

Inline-block with paragraph keeps jumping

html

css

frontend