Question

我正试图用文字输入3个方框。到目前为止，我的框设置正确。但是当我添加文本时，它会上下跳动。当我在div中输入相同数量的段落标记时，它们都会对齐。但是当一个div有1个段落标记而其他div有2个时它们不再对齐。我不知道如何解决这个问题。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

如果你使用一次显示：table;为什么不在孩子身上使用餐桌？

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

使用您的css，您在保留tox的同时将inline-block设置为100％宽度，同时将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 */
}

小提琴：https://jsfiddle.net/debraj/gegc8nuk/2/

带段落的内联块不断跳跃

2 个答案: