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

I've got a group of divs like so:

我有一组像这样的div:

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

with the following css:

使用以下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;
}

This creates a group of element all the same height vertically down the left side of my area. The problem is, I want the .tabs to be square. Since the tabs are dynamically sized to fit the vertical space, I can't define a width. How can I make the width match the height? Ideally this should be done without JavaScript, and pure css/html.

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

Here's a fiddle as requested.

根据要求,这是一个小提琴。

3 个解决方案

#1

See this fiddle

看到这个小提琴

I've used a simple JS as below

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

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

Please note that this <script> should be loaded in document.ready only after the body has loaded.

请注意,只有在加载正文后才能将此

#2

If you can do away for the 48px position from top, you can use this solution:

如果您可以从顶部取消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;
}

Explanation

It leverages the fact that padding is bound to the width of the element it's attached to. You make the outer element .row square by this, using 1/7th of the available screen size in height. By setting a position on the outer element and the inner .tab to position: absolute, you can also use a nifty trick by setting margin: auto along with top, right, bottom and left to 0. You need to specify a height for this element for it to work. Hence the font-size and corresponding height, assuming you only need to center one line of text. By adjusting the height, you can fine tune possible off-positioning caused by a fonts' baseline shift.

它利用了填充与其附加元素的宽度绑定的事实。你可以使用可用屏幕尺寸的1/7来制作外部元素.row square。通过在外部元素和内部.tab上设置一个位置:absolute,你也可以通过设置margin:auto以及top,right,bottom和left来使用一个漂亮的技巧。你需要为此指定一个高度它的元素工作。因此,字体大小和相应的高度,假设您只需要居中一行文本。通过调整高度,您可以微调由字体的基线移位引起的可能的偏移定位。

#3

I have tinkered with the idea and here's what I have come up with, for what it's worth. As written in a previous comment, I do not believe there is a CSS only solution. However, the JS required is minimal.

我对这个想法进行了修改,这就是我想出来的,这是值得的。正如之前的评论所写,我不相信只有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();
});

In case you want to play around with it, I have created a Codepen: http://codepen.io/anon/pen/WvvWPE

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

Update: I have edited the Codepen to calculate the height of the rows automatically instead of setting it via CSS.

更新:我已经编辑了Codepen来自动计算行的高度,而不是通过CSS设置它。