响应网格的绝对正方形

Question

我试图创建一个绝对定义的方块的响应网格。由此，我的意思是我需要将正方形放在其父元素中的某些位置，因此当页面重新调整大小时，我希望正方形与其父元素一致，但不要在行之间切换。

比如说，我有一个3x3正方形的网格：

----------------
| A  | B  | C  |
----------------
| D  | E  | F  |
----------------
| G  | H  | I  |
----------------

我需要整个东西才能轻松调整大小，方块的行和列保持不变。

我已经尝试了几次尝试，但是我总是遇到问题，让它们达到最佳状态。

如果您有任何想法，我们将不胜感激！

约翰

Answer 1

可能你可以用这个吗？

小提琴：http://jsfiddle.net/Preben/dkeccbwo/

我不知道你是否会将文字或图片作为内容，所以这就是我现在可以接受的。您当然需要根据自己的喜好和目的进行更多调整：

<div class="myrow">
  <div class="box">A</div>
  <div class="box">B</div>
  <div class="box">C</div>
</div>

<div class="myrow">
  <div class="box">D</div>
  <div class="box">E</div>
  <div class="box">F</div>
</div>

<div class="myrow">
  <div class="box">G</div>
  <div class="box">H</div>
  <div class="box">I</div>
</div>

CSS：

.myrow {width:100%;border:1px dashed grey; margin-bottom:10px;display:table;}
.box {width:29%;min-height:80px;float:left;margin:2%;background-color:#cecece;}

在div.box中，您可以添加设置为宽度的方形图像：100％然后缩小并保持宽高比。

或者您可能希望使用表格（是的，对于某些内容和目的，表仍然值得研究）。例如，如果您已经使用Bootstrap CSS，则为Bootstrap表：http://getbootstrap.com/css/#tables

Answer 2

function resizeChild(){
  var wid = $('.child:first').width();
  $('.child').css('height', wid);
}
$(function(){
  resizeChild();
  $(window).resize(resizeChild);
});

.parent{
  max-width: 900px;
  font-size: 0;
}
.child{
  display: inline-block;
  font-size: 14px;
  width: 33.33%;
  text-align: center;
  border: 1px dotted #000;
  box-sizing: border-box;
}
.child::after{
  content: "";
  width: 1px;
  height: 100%;
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <div class="child">a</div>
  <div class="child">b</div>
  <div class="child">c</div>
  <div class="child">d</div>
  <div class="child">e</div>
  <div class="child">f</div>
  <div class="child">g</div>
  <div class="child">h</div>
  <div class="child">i</div>
</div>