创建一个响应式布局3 x 3网格的9个圆圈

Question

我一直在尝试在3 x 3网格中创建9个圆圈的HTML / CSS布局。

我希望布局能够快速响应，以便布局能够集中放置在大屏幕上（但没有任何垂直滚动），然后缩小以适应平板电脑/手机屏幕。

这是我想要实现的那种事情的图片（减去底角的瓶子！）

我把我的努力付诸于codepen - 让我说我不是CSS大师。

此示例有一个固定宽度的容器，因此它没有响应。当我尝试设置一个高度时，所有圆圈都会被拉伸。

非常感谢任何帮助。

Answer 1

好吧，作为一个纯CSS 解决方案，您可以使用vh Viewport-percentage lengths为#container根据视口高度指定其尺寸。

我试图实现这一目标：

Sass 版本：

html { height: 100%; }

body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-y: hidden; /* Hide the vertical overflow */
}

#container {
  max-width: 90vh;    /* = 90% of the height of initial containing block */
  max-height: 90vh;
  margin: 5vh auto;
  position: relative;
  background-color: gold;
}

#main {
  height: 100%;
  width: 100%;

  .row {
    width: 100%;
    height: 33.33%;
    font: 0/0 a;    /* Hide the white space between inline(-block) elements */

    .circle {
      display: inline-block;
      vertical-align: middle;
      margin: 3%;
      width: 27.33%;
      padding-bottom: 27.33%;
      background-color: #333;
      border-radius: 50%;
    }
  }
}

<强> WORKING DEMO 即可。 （水平和垂直调整面板/窗口大小）

我应该注意它没有完全browser support，但它适用于大多数现代网络浏览器。

Answer 2

http://jsfiddle.net/Tzx2E/或http://jsfiddle.net/ZkD5v/

HTML：

<div id="grid">
  <div class="row">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
  </div>
  <div class="row">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
  </div>
  <div class="row">
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
    </div>
  </div>
</div>

CSS：

.circle{border:1px solid black;border-radius:50%;width:33%;float:left;margin:0;padding:0;}
.row{clear:left;}

或者：

JS：

$('.circle').height($('.circle').width());

或者：

CSS：

.circle{padding-top:33%;}