3 框网格不等于宽度，因为它们根据文本而变化

Question

我有一小部分 HTML in a word press post body 我有（想要）3 个等宽的框，除了第三个框较小，如果我的文本较少（或更多在另一个盒子里）我不知道如何保持尺寸不变。

我尝试添加 CSS 个容器，添加物理宽度但没有任何变化。

当前代码：

<div>
<div class="page-content">
<div class="grid grid--thirds">
<div class="grid__item" data-match-height="login-block-container" display:block width: 33%;>
<a class="login_link" href="https://www.google.com">
<div class="login-block">
<h5 class="login-block__title">B1HEADERTEXT</h5>
<p>B1BODYTEXT</p>
</div>
</a>
</div>
<div class="grid__item" data-match-height="login-block-container" display:block width: 33%;>
<a class="login_link" href="https://www.google.com">
<div class="login-block">
<h5 class="login-block__title">B2HEADERTEXT</h5>
<p>B2BODYTEXT</p>
</div>
</a>
</div>
<div class="grid__item" data-match-height="login-block-container" display:block width: 33%;>
<a class="login_link" href="https://www.google.com">
<div class="login-block">
<h5 class="login-block__title">B3HEADERTEXT</h5>
<p>B3BPDYTEXT</p>
</div>
</a>
</div>
</div>
</div>
</div>

外观：

文本数量不同：

<div>
<div class="page-content">
<div class="grid grid--thirds">
<div class="grid__item" data-match-height="login-block-container" display:block width: 33%;>
<a class="login_link" href="https://www.google.com">
<div class="login-block">
<h5 class="login-block__title">B1HEADERTEXT</h5>
<p>B1BODYTEXT</p>
</div>
</a>
</div>
<div class="grid__item" data-match-height="login-block-container" display:block width: 33%;>
<a class="login_link" href="https://www.google.com">
<div class="login-block">
<h5 class="login-block__title">B2HEADERTEXT</h5>
<p>B2BODYTEXT</p>
</div>
</a>
</div>
<div class="grid__item" data-match-height="login-block-container" display:block width: 33%;>
<a class="login_link" href="https://www.google.com">
<div class="login-block">
<h5 class="login-block__title">B3HEAD</h5>
<p>B3BPDYTEXT</p>
</div>
</a>
</div>
</div>
</div>
</div>

看起来如何：

Answer 1

从您发布的图片来看，父容器或父容器的行为就像是 flex 或 grid 或类似的东西。

如果您不希望每个框的内容影响任何框的宽度，您可以通过对每个框应用以下代码来实现。

.box {
  width: calc(100% / 3);
  word-wrap: break-word;
}

3 框网格不等于宽度，因为它们根据文本而变化

3 Box grid not equal width as they change depending on text

html

css

width