响应方格内的响应方格
[英] Responsive grid of squares within a responsive grid of squares
本文介绍了响应方格内的响应方格的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试制作一个响应式方块网格，网格中的每个方块都包含另一个响应式方块网格.想象一个数独板，它有 9 个方格，每个方格包含 9 个方格.
我从这个开始:响应方块网格并使用了 flexbox 答案，这里列出了:https://jsfiddle.net/patrickberkeley/noLm1r45/3/
我最初认为，如果我在第一个网格中放置另一个响应式方形网格，它会起作用.但是内容 div 只是变成了 0px 而你什么也看不到.我试过clearfix，但得到了相同的结果.经过几个小时的兜圈子，我一无所获.我错过了什么?有没有更好的JS解决方案?
html:
<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 class='square-grid__cell square-grid__cell--3'><div class='square-grid__content'>部分内容
<div class='square-grid__cell square-grid__cell--3'><div class='square-grid__content'>部分内容
<div class='square-grid__cell square-grid__cell--3'><div class='square-grid__content'>部分内容
<div class='square-grid__cell square-grid__cell--3'><div class='square-grid__content'>部分内容
<div class='square-grid__cell square-grid__cell--3'><div class='square-grid__content'>部分内容
<div class='square-grid__cell square-grid__cell--3'><div class='square-grid__content'>部分内容
<div class='square-grid__cell square-grid__cell--3'><div class='square-grid__content'>部分内容
<div class='square-grid__cell square-grid__cell--3'><div class='square-grid__content'>部分内容
CSS:
.square-grid {显示:弹性；flex-wrap: 包裹;对齐内容:居中；}.square-grid__cell {背景颜色:rgba(0, 0, 0, 0.03);框阴影:0 0 0 1px 黑色；溢出:隐藏；位置:相对；}.square-grid__content {左:0；位置:绝对；顶部:0；}.square-grid__cell:after {内容: '';显示:块；填充底部:100%；}.interior-square-grid {显示:弹性；flex-wrap: 包裹;对齐内容:居中；}.interior-square-grid__cell {背景颜色:rgba(0, 0, 0, 0.03);框阴影:0 0 0 1px 绿色；溢出:隐藏；位置:相对；}.interior-square-grid__content {左:0；位置:绝对；顶部:0；}.interior-square-grid__cell:after {内容: '';显示:块；填充底部:100%；}//大小 - 每行的单元格数.square-grid__cell--10 {弹性基础:10%；}.square-grid__cell--9 {弹性基础:11.1111111%；}.square-grid__cell--8 {弹性基础:12.5%；}.square-grid__cell--7 {弹性基础:14.2857143%；}.square-grid__cell--6 {弹性基础:16.6666667%；}.square-grid__cell--5 {弹性基础:20%；}.square-grid__cell--4 {弹性基础:25%；}.square-grid__cell--3 {弹性基础:33.333%；}.square-grid__cell--2 {弹性基础:50%；}.square-grid__cell--1 {弹性基础:100%；}.interior-square-grid__cell--10 {弹性基础:10%；}.interior-square-grid__cell--9 {弹性基础:11.1111111%；}.interior-square-grid__cell--8 {弹性基础:12.5%；}.interior-square-grid__cell--7 {弹性基础:14.2857143%；}.interior-square-grid__cell--6 {弹性基础:16.6666667%；}.interior-interior-square-grid__cell--5 {弹性基础:20%；}.interior-square-grid__cell--4 {弹性基础:25%；}.interior-square-grid__cell--3 {弹性基础:33.333%；}.interior-square-grid__cell--2 {弹性基础:50%；}.interior-square-grid__cell--1 {弹性基础:100%；}
JS 小提琴:https://jsfiddle.net/emilmr/upozc9a3/
解决方案
我认为您的浮夸是不对的.
您需要一个 flex 容器，其中包含 9 个 flex 子容器，并且还可以容纳 9 个盒子.浮动框也可以，因为你处理方盒 DEMO
* {box-sizing: 边框框；}身体，.柔性 {显示:弹性；flex-wrap: 包裹;}.柔性，.flex>div {边框:实心1px；宽度:33.33%；文本对齐:居中；}.flex >div:之前{显示:内联块；填充顶部:100%；内容: '';垂直对齐:中间；}身体 {宽度:50%；最小宽度:450px；保证金:自动；字体大小:计算(0.5vw + 10px)；/* 在这里保存 3 个字母，你可以增加单个数字的 vw 值 */}/* 在这里调整大小或让窗口来做 */div:第n个孩子(奇数){背景:RGBA(0,0,0,0.25)}
<div>须藤
<div>须藤
<div>须藤
<div>须藤
<div>须藤
<div>须藤
<div>须藤
<div>须藤
<div>须藤
<div class="flex"><div>须藤
<div>须藤
<div>须藤
<div>须藤
<div>须藤
<div>须藤
<div>须藤
<div>须藤
<div>须藤
<div class="flex"><div>须藤
<div>须藤
<div>须藤
<div>须藤
<div>须藤
<div>须藤
<div>须藤
<div>须藤
<div>须藤
<div class="flex"><div>须藤
<div>须藤
<div>须藤
<div>须藤
<div>须藤
<div>须藤
<div>须藤
<div>须藤
<div>须藤
<div class="flex"><div>须藤
<div>须藤
<div>须藤
<div>须藤
<div>须藤
<div>须藤
<div>须藤
<div>须藤
<div>须藤
<div class="flex"><div>须藤
<div>须藤
<div>须藤
<div>须藤
<div>须藤
<div>须藤
<div>须藤
<div>须藤
<div>须藤
<div class="flex"><div>须藤
<div>须藤
<div>须藤
<div>须藤
<div>须藤
<div>须藤
<div>须藤
<div>须藤
<div>须藤
<div class="flex"><div>须藤
<div>须藤
<div>须藤
<div>须藤
<div>须藤
<div>须藤
<div>须藤
<div>须藤
<div>须藤
<div class="flex"><div>须藤
<div>须藤
<div>须藤
<div>须藤
<div>须藤
<div>须藤
<div>须藤
<div>须藤
<div>须藤
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.
I started with this:
Grid of responsive squares
and used the flexbox answer, which was laid out here:
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. I've tried clearfix, but got the same result. After hours of going in circles, I've gotten nowhere. What am I missing? Is there a JS solution that is better?
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/
解决方案
I believe your imbrication is not right.
You need a flex container with 9 flex child holding also 9 boxes. floating boxes will do also since your dealing with square boxes 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>
这篇关于响应方格内的响应方格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
