如何使表格单元格的宽度与其高度相同？答案

【问题标题】：How to make a table-cell have the same width as its height?如何使表格单元格的宽度与其高度相同？
【发布时间】：2015-07-13 01:21:00
【问题描述】：

我有一群divs 像这样：

<div id="container">
    <div id="tabs">
        <div class="row"><div class="tab">....</div></div>
        ...
    </div>
</div>

使用以下 css：

#container {
    position:absolute;
    top:48px;
    bottom:0px;
    width:100%;
}
#tabs {
    display:table;
    height:100%;
}
.row {
    display:table-row;
}
.tab {
    display:table-cell;
    text-align:center;
    vertical-align:middle;
}

这会在我所在区域的左侧垂直下方创建一组高度相同的元素。问题是，我希望.tabs 是方形的。由于选项卡是动态调整大小以适应垂直空间的，因此我无法定义宽度。如何使宽度与高度匹配？理想情况下，这应该在没有 JavaScript 和纯 css/html 的情况下完成。

这是一个fiddle 应要求。

【问题讨论】：

如果你能和我们分享一个小提琴，那会很有帮助..
@Lal 只是我问题的复制粘贴，但我用小提琴更新了我的问题。
看看这个：stackoverflow.com/questions/13851940/….
@garryp 感谢您的链接，我在我的应用程序的其他地方使用了类似的方法。不幸的是，display:table-cell 似乎阻止了这种方法的工作。
如果您的正方形的大小相对于视口大小是固定的，您可以使用 CSS3 单位 vh 和 vw。否则，你可以试试image holder trick。

标签： html css

【解决方案1】：

看到这个fiddle

我用过一个简单的JS如下

<script>
    var th = $('.tab').height();
    $('.row').css({'width':th+'px'});
</script>

请注意，这个<script> 应该仅在正文加载后加载到 document.ready 中。

【讨论】：

这不符合我的问题中的任何条件。 display:table-row 是为了完成表格功能。我希望.tabs 的高度相等并填充父级的整个高度。
你需要this吗？它包括display:table-row
是的，它完成了我正在寻找的东西，尽管它是我已经知道的解决方案。如我的问题所述，如果可能，我宁愿使用 css/html 方法。
由于它不满足问题中的要求，我不打算投票。
你的意思是你正在研究另一个答案吗？或者这个答案是在使用 css？

【解决方案2】：

如果您可以取消顶部 48px 的位置，您可以使用此解决方案：

body {
  margin: 0;
}

#container {
  bottom: 0;
  position: absolute;
  width: 100%;
}

.row {
  padding-bottom: 14.28571429%;
  position: relative;
  width: 14.28571429%;
}

.tab {
  bottom: 0;
  font-size: 20px;
  height: 20px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
}

说明

它利用了 padding 绑定到它所附加的元素的宽度这一事实。您可以通过此方法使外部元素.row 成为正方形，使用高度为可用屏幕尺寸的 1/7。通过在外部元素上设置position 并将内部.tab 设置为position: absolute，您还可以通过设置margin: auto 以及top、right、bottom 和left 来使用一个漂亮的技巧到0。您需要为此元素指定一个高度才能使其工作。因此font-size 和相应的height，假设您只需要将一行文本居中。通过调整高度，您可以微调由字体基线偏移引起的可能偏移。

【讨论】：

使用提供的 CSS 时，元素的高度会随宽度缩放，因此较宽的分辨率会将第一个标签页显示在屏幕顶部，而较薄的分辨率会将所有标签页显示在屏幕底部的 50%视口。
你是对的。我很快就把它放在一起而没有正确测试它。再想一想，我相信您将无法避免在此任务中使用 JavaScript，因为您希望两个维度都能自动调整为您缩放浏览器窗口的方式。
我已经设法用 CSS 完成了我想要的，但有一些问题（至少是 chrome）导致它出现错误和不可预测。不幸的是，我认为你是对的。
如果你觉得我的回答对你有帮助，你可以accept my answer。

【解决方案3】：

我已经修改了这个想法，这就是我想出的，因为它的价值。正如在之前的评论中所写，我不相信只有 CSS 解决方案。但是，所需的 JS 很少。

HTML

<div id="container">
  <div id="tabs">
    <div class="row">
      <div class="tab"><span>1</span></div>
    </div>
    <div class="row">
      <div class="tab"><span>2</span></div>
    </div>
    <div class="row">
      <div class="tab"><span>3</span></div>
    </div>
    <div class="row">
      <div class="tab"><span>4</span></div>
    </div>
    <div class="row">
      <div class="tab"><span>5</span></div>
    </div>
    <div class="row">
      <div class="tab"><span>6</span></div>
    </div>
    <div class="row">
      <div class="tab"><span>7</span></div>
    </div>
  </div>
</div>

CSS

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}
#container {
  width: 100%;
  height: 100%;
}
#tabs {
  width: 100%;
  height: 100%;
}
.row {
  position: relative;
  height: 14.28571429%;
}
.tab {
  display: block;
  position: relative;
  background-color: #008000;
}
.tab span {
  position: absolute;
  height: 20px;
  font-size: 20px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  text-align: center;
}

JS

var adjustHeight = function() {

  var rowHeight = $('.row').height();
  $('.tab').each(function(){
    $(this).height(rowHeight);
    $(this).width(rowHeight);
  });

}

adjustHeight();

$(window).on("resize", function() {
  adjustHeight();
});

如果你想玩它，我已经创建了一个 Codepen：http://codepen.io/anon/pen/WvvWPE

更新：我已编辑 Codepen 以自动计算行高，而不是通过 CSS 设置。

【讨论】：