对齐同一行中不同高度的元素

Question

我试图在同一水平轴上显示多个圆圈，但宽度和高度不同。问题是圆圈缩小了。

body,
html {
  height: 100%;
  margin: 0;
  padding: 0;
}

.circles-container {
  display: table;
  border-spacing: 40px;
}

.row {
  display: table-row;
}

.circle {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  border-radius: 50%;
  text-align: center;
  vertical-align: middle;
  display: table-cell;
}

.cell {
  display: table-cell;
}

.big-circle {
  width: 300px;
  height: 300px;
}

<div class="circles-container">
  <div class="row">
    <div class="cell">
      <div class="circle">
        <span>TEXT</span>
      </div>
    </div>
    <div class="cell">
      <div class="circle">
        <span>TEXT</span>
      </div>
    </div>
    <div class="cell">
      <div class="big-circle circle">
        <span>TEXT</span>
      </div>
    </div>
    <div class="cell">
      <div class="circle">
        <span>TEXT</span>
      </div>
    </div>
    <div class="cell">
      <div class="big-circle circle">
        <span>TEXT</span>
      </div>
    </div>
  </div>
</div>

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

Answer 1

您不应该为此使用表格布局。您的 HTML 在语义上不表示表格，因此table元素难以使用。

你想做的事情都可以通过 Flexbox 来实现。

article {
  display: flex;
  align-items: center;
}

article > div + div {
  margin-left: 1rem;
}

article > div {
  flex-shrink: 0;
  height: 4rem;
  width: 4rem;
  border-radius: 50%;
  border: solid 1px black;
  display: flex;
  justify-content: center;
  align-items: center;
}

article > div:nth-child(2) {
  height: 6rem;
  width: 6rem;
}

<article>
  <div><span>TEXT</span></div>
  <div><span>TEXT</span></div>
  <div><span>TEXT</span></div>
  <div><span>TEXT</span></div>
  <div><span>TEXT</span></div>
  <div><span>TEXT</span></div>
  <div><span>TEXT</span></div>
  <div><span>TEXT</span></div>
  <div><span>TEXT</span></div>
</article>

您可能想在 MDN 上阅读有关 Flexbox 的更多信息。