Question

我在<td>内有三个并排的div（我不知道）。它们的样式使得字体大小，行高和宽度根据视口宽度调整。文本可以流过2-4行，这很好。我需要每个<div>与最高的高度相同三个并排<div>的。

我已将<div>包装在class='infowrap'的包装中，因为我认为我可以设计这个包装器以获得我想要的效果吗？ - 但我不确定如何。

.infobox {
  background-color: #f0f0df;
  display: inline-block;
  margin: 0.5vw;
  padding: 0.5vw;
  width: 12vw;
  line-height: 2vw;
  border-radius: 0.25vw;
  vertical-align: top;
  box-shadow: 0px 0.1vw 0px 0px grey;
  font-size: 2vw;
  margin-left: 5vw;
  margin-right: 5vw;

}

<div class=infowrap>
  <div class=infobox><span class="mobhide">blurb</span>
    <p><b>more stuff here</b>
  </div>
  <div class=infobox><span class="mobhide">blurb</span>
    <p><b>more stuff here</b>
  </div>
  <div class=infobox><span class="mobhide">blurb</span>
    <p><b>more stuff here</b>
  </div>
</div>

Answer 1

您可以使用 Flexbox

＆＃13;

.infowrap {
  display: flex;
}

.infobox {
  flex: 1;
  background: #F0F0DF;
  margin: 10px;
}

＆＃13;

<div class=infowrap>
  <div class=infobox>
    <span class="mobhide">blurb</span>
    <p><b>more stuff here</b>
  </div>
  <div class=infobox>
    <span class="mobhide">blurb</span>
    <p><b>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam omnis maxime ullam veniam.</b>
  </div>
  <div class=infobox>
    <span class="mobhide">blurb</span>
    <p><b>more stuff here</b>
  </div>
</div>

＆＃13;

MDN Flexbox Reference

Answer 2

您可以使用首选的flexbox，但IE＆lt; 11。

不支持

作为替代方案，您可以创建另一个包含3列的表，而不是使用3个div。表会自动导致所有列的高度相同。

为了稳定性和页面速度，我建议使用表格或仅使用CSS的解决方案，而不是使用JS。

根据经验，您应该尽可能避免使用JS进行DOM操作。

并排div具有相同的高度

2 个答案: