Question

我有一组像这样的div：

<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;
}

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

此处根据要求提供fiddle。

Answer 1

请参阅此fiddle

我使用了一个简单的JS，如下所示

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

请注意，只有在主体加载后，才应在document.ready中加载此<script>。

Answer 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;
}

解释

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

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设置它。

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

3 个答案:

解释

HTML

CSS

JS