Html 等高自举单元

我有以下几点

<div class="row">
  <div class="col-md-6">
    <div class = "box-cell">
      <p>
        Slightly short text
      </p>
    </div>
  </div>
  <div class="col-md-6">
    <div class = "box-cell">
      <p>
        Text that<br>literally<br>spans<br>4 lines
      </p>
    </div>
  </div>
</div>

所以我面临的问题是，一个细胞通常比另一个细胞高。有没有办法使每个细胞的高度相等？ 搜索并没有生成可以操作的属性以获得相同高度：(

然而，在这种情况下，我无法让他们并肩证明我的观点

---

编辑：我想我没有正确地指定它。我希望边框与最高的单元格一样高。因此，这里提供的所有示例实际上都去掉了边框，而不是给背景上色。如果我这样做，那么是的，它会给人一种每个单元格都相同的错觉，但我希望有一个相同高度的边框。

我试过了

我建议您使用

flexbox

，因为它似乎正是您想要的

<div class="myc">
    <div class="col">
      <p>Text of some sorts</p>
      <p>Text of some sorts</p>
      <p>Text of some sorts</p>
      <p>Text of some sorts</p>

    </div>
    <div class="col">
      <p>Text of some sorts</p>
      <p>Text of some sorts</p>
      <p>Text of some sorts</p>

    </div>
  </div>

我试过了

我建议您使用

flexbox

，因为它似乎正是您想要的

<div class="myc">
    <div class="col">
      <p>Text of some sorts</p>
      <p>Text of some sorts</p>
      <p>Text of some sorts</p>
      <p>Text of some sorts</p>

    </div>
    <div class="col">
      <p>Text of some sorts</p>
      <p>Text of some sorts</p>
      <p>Text of some sorts</p>

    </div>
  </div>

.row{
显示：-网络工具包盒；
显示：-webkit flex；
显示：-ms flexbox；
显示器：flex；
}
.row>[class*='col-']{
显示器：flex；
弯曲方向：立柱；
}

一些内容
一些内容
部分内容

.row{
显示：-网络工具包盒；
显示：-webkit flex；
显示：-ms flexbox；
显示器：flex；
}
.row>[class*='col-']{
显示器：flex；
弯曲方向：立柱；
}

一些内容
一些内容
部分内容

.箱形电池{
位置：相对位置；
保证金：3倍；
边框样式：槽脊槽；
边框宽度：3倍；
背景尺寸：封面；
}

略短的文本


发短信说
字面上
s4线
ygthfg

1-您需要在

span

标记中添加文本。 2-或将文本放在一行中。

.箱形电池{
位置：相对位置；
保证金：3倍；
边框样式：槽脊槽；
边框宽度：3倍；
背景尺寸：封面；
}

略短的文本


发短信说
字面上
s4线
ygthfg

1-您需要在

span

标记中添加文本。 2-或将文本放在一行中。

解决此问题的一些选项： 解决此问题的一些选项：

---

---

你能提供一个JSFIDLE链接或什么吗？@Pytth我添加了JSFIDLE，但是我无法使它并排。你可以通过拖动面板的侧面来扩展JSFIDLE中的可视区域。当我这样做时，我可以使项目彼此相邻，但看起来它们的高度相同。这个问题以前有人问过：您是否为其指定了明确的

高度

？能否提供一个JSFIDLE链接或其他内容？@Pytth我添加了JSFIDLE，但我无法将其并排放置。您可以通过拖动该面板的侧面来扩展JSFIDLE中的可视区域。当我这样做时，我可以获得彼此相邻的项目，但看起来它们都是sa我的身高。以前有人问过这个问题：你给它明确的高度吗？添加这些跨距能完成什么？添加这些跨距能完成什么？我想让边框变高，而不仅仅是背景上色。此外，我必须使用bootstrap提供的行和列，因为它是near完美的网格方法。是的，我把颜色放在那里只是为了更好地显示高度的差异。Bootstrap的网格当然很棒，但正如你所看到的，它确实有它的局限性。熟悉Flexbox和内置CSS网格系统可能会派上用场。一旦你开始使用这些技术，我几乎可以保证你会赢“我不需要再使用bootstrap来进行布局。我注意到，如果我使用

flex

，那么我在移动设备上的布局会非常糟糕。有什么方法可以避免这种情况吗？我想让边框变高，而不仅仅是背景上色。此外，我还必须使用bootstrap提供的行和列，因为它接近完美的g。”rid mthodology。是的，我把颜色放在那里只是为了更好地显示高度上的差异。Bootstrap的网格当然很棒，但正如你所看到的，它确实有它的局限性。熟悉Flexbox和内置CSS网格系统可能会派上用场。一旦你开始使用这些技术，我几乎可以保证你不需要使用r我注意到，如果我使用flex，那么我在手机上的布局会非常糟糕。有没有办法避免这种情况？设置背景会让人产生每个单元格都是相同高度的错觉，但我需要边框是相同高度的，仅仅设置背景并不能真正实现背景设置nd给人一种错觉，每个细胞都是相同的高度，但我需要边界是相同的高度，只是设置背景并不能真正完成很多工作

.myc {
  display: flex;
}

.col {
  background-color: yellow;
  margin-right: 20px;
}

<style type="text/css">
.box-cell{
    position:        relative;
    margin:          3px;
    border-style:    groove ridge ridge groove;
    border-width:    3px;
    background-size: cover;
}
</style>    
<div class="row">
  <div class="col-md-6">
    <div class = "box-cell">
      <p>
        Slightly short text
      </p>
    </div>
  </div>
  <div class="col-md-6">
    <div class = "box-cell">
      <p>
        <span>Text that</span>
        <span>literally</span>
        <span>s4 lines</span>
        <span>ygthfg</span>
      </p>
    </div>
  </div>
</div>