創建一個9圈的自適應布局3 x 3網格

Question

我一直在嘗試在3 x 3的網格中創建9個圓圈的HTML / CSS布局。

我希望該布局具有響應性，以便該布局可以在大屏幕上居中放置（但沒有任何垂直滾動），然后縮小以在平板電腦/手機屏幕上也可以很好地放置。

這是我要實現的目標的圖片（去掉底角的瓶子！）

我已經在Codepen上投入了非常少的精力-假設我不是CSS大師。

這個例子有一個固定寬度的容器，所以它沒有響應。 當我嘗試僅設置高度時，所有圓圈都會拉伸。

任何幫助將非常感激。

Answer 1

好吧，作為純CSS解決方案，您可以為#container使用vh Viewport-percentage長度來基於視口高度指定其尺寸。

這是我嘗試實現的目標：

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

工作演示 。 （水平和垂直調整面板/窗口的大小）

我應該注意，它沒有完全的瀏覽器支持 ，但是可以在大多數現代Web瀏覽器上使用。

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