我正在尝试制作一个响应式正方形网格，网格中的每个正方形都包含另一个响应式正方形网格。想一想有 9 个方格的数独棋盘，每个方格包含 9 个方格。
我从这个开始: Grid of responsive squares 并使用了此处列出的 flexbox 答案: https://jsfiddle.net/patrickberkeley/noLm1r45/3/
我原本以为只要在第一个响应式方形网格内放置另一个响应式方形网格就可以了。但是内容 div 变成了 0px，你什么也看不到。我试过 clearfix，但得到了相同的结果。经过几个小时的兜圈子，我一无所获。我错过了什么？有没有更好的JS解决方案？
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:
.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/
最佳答案
我认为你的重叠是不对的。
您需要一个带有 9 个 flex child 的 flex container 以及 9 个盒子。 float 框也可以，因为你处理的是方形框 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>关于javascript - 响应式正方形网格内的响应式正方形网格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37105579/