堆栈内存溢出
  简体   繁体   English

响应方格内的响应方格

[英]Responsive grid of squares within a responsive grid of squares

 原文  2016-05-08 22:39:23  5   4    javascript/ html/ css/ flexbox/ responsive

问题描述

I am trying to make a grid of responsive squares, with each square in the grid containing another grid of responsive squares. 我正在尝试制作一个响应正方形网格，网格中的每个正方形都包含另一个响应正方形网格。 Think of a sudoku board, which has 9 squares, each containing 9 squares. 想想一个数独板，它有9个正方形，每个正方形包含9个正方形。

I started with this: Grid of responsive squares and used the flexbox answer, which was laid out here: https://jsfiddle.net/patrickberkeley/noLm1r45/3/ 我从这开始： 响应正方形网格，并使用了flexbox答案，该答案在此处列出： https ://jsfiddle.net/patrickberkeley/noLm1r45/3/

I originally thought that it would work if I just put another responsive square grid inside of the first one. 我本来以为只要在第一个方格内放另一个响应方格就可以了。 But the content div just becomes 0px and you don't see anything. 但是内容div变为0px，您什么也看不到。 I've tried clearfix, but got the same result. 我已经尝试过clearfix，但是得到了相同的结果。 After hours of going in circles, I've gotten nowhere. 经过数小时的盘旋，我一无所获。 What am I missing? 我想念什么？ Is there a JS solution that is better? 有没有更好的JS解决方案？

html: 的HTML： 

 <div class='square-grid'>
  <div class='square-grid__cell square-grid__cell--3'>
    <div class='square-grid__content'>
     <div class='interior-square-grid'>
       <div class='interior-square-grid__cell square-grid__cell--3'>
        <div class='interior-square-grid__content'>
        3
        </div>
       </div>
     </div>
    </div>
  </div>
  <div class='square-grid__cell square-grid__cell--3'>
    <div class='square-grid__content'>
      Some content
    </div>
  </div>
  <div class='square-grid__cell square-grid__cell--3'>
    <div class='square-grid__content'>
      Some content
    </div>
  </div>
  <div class='square-grid__cell square-grid__cell--3'>
    <div class='square-grid__content'>
      Some content
    </div>
  </div>
  <div class='square-grid__cell square-grid__cell--3'>
    <div class='square-grid__content'>
      Some content
    </div>
  </div>
  <div class='square-grid__cell square-grid__cell--3'>
    <div class='square-grid__content'>
      Some content
    </div>
  </div>
  <div class='square-grid__cell square-grid__cell--3'>
    <div class='square-grid__content'>
      Some content
    </div>
  </div>
  <div class='square-grid__cell square-grid__cell--3'>
    <div class='square-grid__content'>
      Some content
    </div>
  </div>
  <div class='square-grid__cell square-grid__cell--3'>
    <div class='square-grid__content'>
      Some content
    </div>
  </div>
</div>

css: CSS： 

  .square-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.square-grid__cell {
  background-color: rgba(0, 0, 0, 0.03);
  box-shadow: 0 0 0 1px black;
  overflow: hidden;
  position: relative;
}

.square-grid__content {
  left: 0;
  position: absolute;
  top: 0;
}

.square-grid__cell:after {
  content: '';
  display: block;
  padding-bottom: 100%;
}

.interior-square-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.interior-square-grid__cell {
  background-color: rgba(0, 0, 0, 0.03);
  box-shadow: 0 0 0 1px green;
  overflow: hidden;
  position: relative;
}

.interior-square-grid__content {
  left: 0;
  position: absolute;
  top: 0;
}

.interior-square-grid__cell:after {
  content: '';
  display: block;
  padding-bottom: 100%;
}

// Sizes – Number of cells per row

.square-grid__cell--10 {
  flex-basis: 10%;
}

.square-grid__cell--9 {
  flex-basis: 11.1111111%;
}

.square-grid__cell--8 {
  flex-basis: 12.5%;
}

.square-grid__cell--7 {
  flex-basis: 14.2857143%;
}

.square-grid__cell--6 {
  flex-basis: 16.6666667%;
}

.square-grid__cell--5 {
  flex-basis: 20%;
}

.square-grid__cell--4 {
  flex-basis: 25%;
}

.square-grid__cell--3 {
  flex-basis: 33.333%;
}

.square-grid__cell--2 {
  flex-basis: 50%;
}

.square-grid__cell--1 {
  flex-basis: 100%;
}

.interior-square-grid__cell--10 {
  flex-basis: 10%;
}

.interior-square-grid__cell--9 {
  flex-basis: 11.1111111%;
}

.interior-square-grid__cell--8 {
  flex-basis: 12.5%;
}

.interior-square-grid__cell--7 {
  flex-basis: 14.2857143%;
}

.interior-square-grid__cell--6 {
  flex-basis: 16.6666667%;
}

.interior-interior-square-grid__cell--5 {
  flex-basis: 20%;
}

.interior-square-grid__cell--4 {
  flex-basis: 25%;
}

.interior-square-grid__cell--3 {
  flex-basis: 33.333%;
}

.interior-square-grid__cell--2 {
  flex-basis: 50%;
}

.interior-square-grid__cell--1 {
  flex-basis: 100%;
}

JS fiddle: https://jsfiddle.net/emilmr/upozc9a3/ JS小提琴： https : //jsfiddle.net/emilmr/upozc9a3/

4 个解决方案

解决方案1
 0 已采纳  2016-05-08 23:31:29

I believe your imbrication is not right. 我相信您的灌输是不对的。

You need a flex container with 9 flex child holding also 9 boxes. 您需要一个带有9个flex子容器的flex容器，其中还有9个盒子。 floating boxes will do also since your dealing with square boxes DEMO 浮动盒也可以，因为您处理的是方形盒 DEMO 

 * { box-sizing: border-box; } body, .flex { display: flex; flex-wrap: wrap; } .flex, .flex>div { border: solid 1px; width: 33.33%; text-align: center; } .flex > div:before { display: inline-block; padding-top: 100%; content: ''; vertical-align: middle; } body { width:50%; min-width: 450px; margin:auto; font-size: calc(0.5vw + 10px); /* to hold here 3 letters, you can increase vw value for a single number */ } /* resize here or let window do it */ div:nth-child(odd){ background:rgba(0,0,0,0.25) } 
 <div class="flex"> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> </div> <div class="flex"> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> </div> <div class="flex"> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> </div> <div class="flex"> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> </div> <div class="flex"> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> </div> <div class="flex"> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> </div> <div class="flex"> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> </div> <div class="flex"> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> </div> <div class="flex"> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> </div>

解决方案2
 0  2016-05-08 23:36:20

Here is my solution :) not for 9x9 but you can edit it to fit your needs, this solution includes bootstrap for responsive look, https://jsfiddle.net/noLm1r45/16/here is the soulution. 这是我的解决方案:)不适用于9x9，但您可以对其进行编辑以适合您的需求，此解决方案包括用于响应式外观的引导程序， https ：//jsfiddle.net/noLm1r45/16/此处为解决方案。

HTML : HTML： 

  <body>
<div class="row">
<div class="out  col-xs-4">
  <div class="content_out">
  <div class="row">
     <div class="in col-xs-4 ">
      <div class="content_in">
      </div>
    </div>
   <div class="in  col-xs-4">
      <div class="content_in">
      </div>
    </div>
        <div class="in col-xs-4">
          <div class="content_in">
      </div>
    </div>
        <div class="in  col-xs-4">
          <div class="content_in">
      </div>
    </div>
        <div class="in  col-xs-4">
          <div class="content_in">
      </div>
    </div>
        <div class="in  col-xs-4">
          <div class="content_in">
      </div>
    </div>
        <div class="in  col-xs-4">
          <div class="content_in">
      </div>
    </div>
        <div class="in  col-xs-4">
          <div class="content_in">
      </div>
    </div>
    </div>
  </div>
</div>
<div class="out  col-xs-4">
  <div class="content_out">
  <div class="row">
     <div class="in  col-xs-4">
      <div class="content_in">
      </div>
    </div>
   <div class="in  col-xs-4">
          <div class="content_in">
      </div>
    </div>
        <div class="in  col-xs-4">
          <div class="content_in">
      </div>
    </div>
        <div class="in  col-xs-4">
          <div class="content_in">
      </div>
    </div>
        <div class="in  col-xs-4">
          <div class="content_in">
      </div>
    </div>
        <div class="in  col-xs-4">
          <div class="content_in">
      </div>
    </div>
        <div class="in  col-xs-4">
          <div class="content_in">
      </div>
    </div>
        <div class="in  col-xs-4">
          <div class="content_in">
      </div>
    </div>
    </div>
  </div>
</div>
<div class="out  col-xs-4">
  <div class="content_out">
  <div class="row">

   <div class="in  col-xs-4">
          <div class="content_in">
      </div>
    </div>
        <div class="in  col-xs-4">
          <div class="content_in">
      </div>
    </div>
        <div class="in  col-xs-4">
          <div class="content_in">
      </div>
    </div>
        <div class="in  col-xs-4">
          <div class="content_in">
      </div>
    </div>
        <div class="in  col-xs-4">
          <div class="content_in">
      </div>
    </div>
        <div class="in  col-xs-4">
          <div class="content_in">
      </div>
    </div>
        <div class="in  col-xs-4">
          <div class="content_in">
      </div>
    </div>
       <div class="in  col-xs-4">
      <div class="content_in">
      </div>
    </div>
    </div>
  </div>
</div>
<div class="out  col-xs-4">
  <div class="content_out">
  <div class="row">
     <div class="in  col-xs-4">
      <div class="content_in">
      </div>
    </div>
   <div class="in  col-xs-4">
          <div class="content_in">
      </div>
    </div>
        <div class="in  col-xs-4">
          <div class="content_in">
      </div>
    </div>
        <div class="in  col-xs-4">
          <div class="content_in">
      </div>
    </div>
        <div class="in  col-xs-4">
          <div class="content_in">
      </div>
    </div>
        <div class="in  col-xs-4">
          <div class="content_in">
      </div>
    </div>
        <div class="in  col-xs-4">
          <div class="content_in">
      </div>
    </div>
        <div class="in  col-xs-4">
          <div class="content_in">
      </div>
    </div>

    </div>
  </div>
</div>
<div class="out  col-xs-4">
  <div class="content_out">
  <div class="row">

   <div class="in  col-xs-4">
          <div class="content_in">
      </div>
    </div>
        <div class="in  col-xs-4">
          <div class="content_in">
      </div>
    </div>
        <div class="in  col-xs-4">
          <div class="content_in">
      </div>
    </div>
        <div class="in  col-xs-4">
          <div class="content_in">
      </div>
    </div>
        <div class="in  col-xs-4">
          <div class="content_in">
      </div>
    </div>
        <div class="in  col-xs-4">
          <div class="content_in">
      </div>
    </div>
        <div class="in  col-xs-4">
          <div class="content_in">
      </div>
    </div>
       <div class="in  col-xs-4">
      <div class="content_in">
      </div>
    </div>
    </div>
  </div>
</div>
<div class="out  col-xs-4">
  <div class="content_out">
  <div class="row">

   <div class="in  col-xs-4">
          <div class="content_in">
      </div>
    </div>
        <div class="in  col-xs-4">
          <div class="content_in">
      </div>
    </div>
        <div class="in  col-xs-4">
          <div class="content_in">
      </div>
    </div>
        <div class="in  col-xs-4">
          <div class="content_in">
      </div>
    </div>
        <div class="in  col-xs-4">
          <div class="content_in">
      </div>
    </div>
        <div class="in  col-xs-4">
          <div class="content_in">
      </div>
    </div>
        <div class="in col-xs-4">
          <div class="content_in">
      </div>
    </div>
       <div class="in  col-xs-4">
      <div class="content_in">
      </div>
    </div>
    </div>
  </div>
</div>
</div>
</body>

CSS: CSS： 

.out{
  position:relative;
  min-height:100px;
  padding:10px;

}
.in{

  position:relative;
  min-height:13%;
  height:13%;
  display:block;
}
.row{
  position:relative;
  min-height:100%;
  height:100%;

}
.content_out{
  position:relative;
  margin:5px;
  background:red;
  min-height:80%;
  display:block;
}
.content_in{

  margin:5px;
  background:yellow;

  min-height:40px;
  display:block;

}

解决方案3
 0  2016-05-08 23:43:11

Here are 9 sudoku games with 9x9 sudoku grids inside. 这是9个数独游戏，其中包含9x9数独网格。 

 body { margin: 0; padding: 0; } div { overflow: hidden; box-sizing: border-box; } .outer-grid { position: relative; float: left; width: 33.3%; padding-bottom: 33.3%; border: 1px solid gray; background-color: #9cc; } .outer-square { position: absolute; left: 0; top: 0; width: 90%; height: 90%; background-color: #ccc; margin: 5%; display: -webkit-flex; -webkit-flex-wrap: wrap; display: flex; flex-wrap: wrap; } .inner-grid { width: 33.3%; height: 33.3%; border: 1px solid red; display: table; } .inner-square { line-height: 100%; font-size: 50px; font-weight: bold; display: table-cell; text-align: center; vertical-align: middle; } 
 <div class="grid-container"> <div class="outer-grid"> <div class="outer-square"> <div class="inner-grid"> <div class="inner-square">1</div> </div> <div class="inner-grid"> <div class="inner-square">2</div> </div> <div class="inner-grid"> <div class="inner-square">3</div> </div> <div class="inner-grid"> <div class="inner-square">4</div> </div> <div class="inner-grid"> <div class="inner-square">5</div> </div> <div class="inner-grid"> <div class="inner-square">6</div> </div> <div class="inner-grid"> <div class="inner-square">7</div> </div> <div class="inner-grid"> <div class="inner-square">8</div> </div> <div class="inner-grid"> <div class="inner-square">9</div> </div> </div> </div> <div class="outer-grid"> <div class="outer-square"> <div class="inner-grid"> <div class="inner-square">1</div> </div> <div class="inner-grid"> <div class="inner-square">2</div> </div> <div class="inner-grid"> <div class="inner-square">3</div> </div> <div class="inner-grid"> <div class="inner-square">4</div> </div> <div class="inner-grid"> <div class="inner-square">5</div> </div> <div class="inner-grid"> <div class="inner-square">6</div> </div> <div class="inner-grid"> <div class="inner-square">7</div> </div> <div class="inner-grid"> <div class="inner-square">8</div> </div> <div class="inner-grid"> <div class="inner-square">9</div> </div> </div> </div> <div class="outer-grid"> <div class="outer-square"> <div class="inner-grid"> <div class="inner-square">1</div> </div> <div class="inner-grid"> <div class="inner-square">2</div> </div> <div class="inner-grid"> <div class="inner-square">3</div> </div> <div class="inner-grid"> <div class="inner-square">4</div> </div> <div class="inner-grid"> <div class="inner-square">5</div> </div> <div class="inner-grid"> <div class="inner-square">6</div> </div> <div class="inner-grid"> <div class="inner-square">7</div> </div> <div class="inner-grid"> <div class="inner-square">8</div> </div> <div class="inner-grid"> <div class="inner-square">9</div> </div> </div> </div> <div class="outer-grid"> <div class="outer-square"> <div class="inner-grid"> <div class="inner-square">1</div> </div> <div class="inner-grid"> <div class="inner-square">2</div> </div> <div class="inner-grid"> <div class="inner-square">3</div> </div> <div class="inner-grid"> <div class="inner-square">4</div> </div> <div class="inner-grid"> <div class="inner-square">5</div> </div> <div class="inner-grid"> <div class="inner-square">6</div> </div> <div class="inner-grid"> <div class="inner-square">7</div> </div> <div class="inner-grid"> <div class="inner-square">8</div> </div> <div class="inner-grid"> <div class="inner-square">9</div> </div> </div> </div> <div class="outer-grid"> <div class="outer-square"> <div class="inner-grid"> <div class="inner-square">1</div> </div> <div class="inner-grid"> <div class="inner-square">2</div> </div> <div class="inner-grid"> <div class="inner-square">3</div> </div> <div class="inner-grid"> <div class="inner-square">4</div> </div> <div class="inner-grid"> <div class="inner-square">5</div> </div> <div class="inner-grid"> <div class="inner-square">6</div> </div> <div class="inner-grid"> <div class="inner-square">7</div> </div> <div class="inner-grid"> <div class="inner-square">8</div> </div> <div class="inner-grid"> <div class="inner-square">9</div> </div> </div> </div> <div class="outer-grid"> <div class="outer-square"> <div class="inner-grid"> <div class="inner-square">1</div> </div> <div class="inner-grid"> <div class="inner-square">2</div> </div> <div class="inner-grid"> <div class="inner-square">3</div> </div> <div class="inner-grid"> <div class="inner-square">4</div> </div> <div class="inner-grid"> <div class="inner-square">5</div> </div> <div class="inner-grid"> <div class="inner-square">6</div> </div> <div class="inner-grid"> <div class="inner-square">7</div> </div> <div class="inner-grid"> <div class="inner-square">8</div> </div> <div class="inner-grid"> <div class="inner-square">9</div> </div> </div> </div> <div class="outer-grid"> <div class="outer-square"> <div class="inner-grid"> <div class="inner-square">1</div> </div> <div class="inner-grid"> <div class="inner-square">2</div> </div> <div class="inner-grid"> <div class="inner-square">3</div> </div> <div class="inner-grid"> <div class="inner-square">4</div> </div> <div class="inner-grid"> <div class="inner-square">5</div> </div> <div class="inner-grid"> <div class="inner-square">6</div> </div> <div class="inner-grid"> <div class="inner-square">7</div> </div> <div class="inner-grid"> <div class="inner-square">8</div> </div> <div class="inner-grid"> <div class="inner-square">9</div> </div> </div> </div> <div class="outer-grid"> <div class="outer-square"> <div class="inner-grid"> <div class="inner-square">1</div> </div> <div class="inner-grid"> <div class="inner-square">2</div> </div> <div class="inner-grid"> <div class="inner-square">3</div> </div> <div class="inner-grid"> <div class="inner-square">4</div> </div> <div class="inner-grid"> <div class="inner-square">5</div> </div> <div class="inner-grid"> <div class="inner-square">6</div> </div> <div class="inner-grid"> <div class="inner-square">7</div> </div> <div class="inner-grid"> <div class="inner-square">8</div> </div> <div class="inner-grid"> <div class="inner-square">9</div> </div> </div> </div> <div class="outer-grid"> <div class="outer-square"> <div class="inner-grid"> <div class="inner-square">1</div> </div> <div class="inner-grid"> <div class="inner-square">2</div> </div> <div class="inner-grid"> <div class="inner-square">3</div> </div> <div class="inner-grid"> <div class="inner-square">4</div> </div> <div class="inner-grid"> <div class="inner-square">5</div> </div> <div class="inner-grid"> <div class="inner-square">6</div> </div> <div class="inner-grid"> <div class="inner-square">7</div> </div> <div class="inner-grid"> <div class="inner-square">8</div> </div> <div class="inner-grid"> <div class="inner-square">9</div> </div> </div> </div> </div>

解决方案4
 0  2016-05-08 23:53:28

I'm suggesting another approach - you can decide for yourself if it will be convinient in the long run: 我建议另一种方法-从长远来看，您可以自己决定是否方便：

https://jsfiddle.net/3t17kuzu/3/ https://jsfiddle.net/3t17kuzu/3/

The example is with a 33.3% width of the elements. 该示例的元素宽度为33.3％。 

.sg-3 {
    width: 33.3333%;
    float: left;
    position: relative;
    height: 0;
    padding-top: 33%;
    position: relative;
    outline: 1px solid black;
}

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 绝对正方形的响应网格 - Responsive grid of absolute squares 网格 JavaScript 的颜色方块 - Color squares of a grid JavaScript 带有模式弹出框的正方形网格 - Grid of squares with modal popup 创建可点击的网格方块 - Creating Clickable grid squares jQuery函数使响应正方形 - jQuery function makes responsive squares 响应的宽度和高度为一组正方形 - Responsive width and height for a group of squares 绘制 100 万个正方形的可点击网格 - Draw clickable grid of 1 million squares 适合任何宽度/高度容器的正方形网格 - Grid of squares that fits within any width/height container 在旋转的矩形中迭代网格正方形 - Iterate grid squares in a rotated rectangle 将固定网格重新构建为响应网格 - Remaking fixed grid to a responsive grid
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM