- 首页
- 前端开发
- 响应式 Square Divs 跨浏览器兼容
响应式 Square Divs 跨浏览器兼容
[英] Responsive Square Divs Cross Browser Compatible
本文介绍了响应式 Square Divs 跨浏览器兼容的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个 50/50 宽的页面.左半边有一排有六个 div.标准:
- 6 个方格必须始终保持方格.
- 前 5 个方格应该在右侧有边距/填充以进行分隔.
- 所有六个方格必须保持在同一行.如果我能做到这一点,我就可以在较小的视口中对响应能力进行必要的调整.
- 跨浏览器兼容最新版本的 ie、chrome 和 firefox.
我的代码笔:
<div class="容器"><div class="column" style="margin-right: 20px"><div class="flex-container"><div class="flex-item"><div class="flex-item-inner"><div class="flex-item-inner-content">L1
<div class="flex-item"><div class="flex-item-inner"><div class="flex-item-inner-content">L2
<div class="flex-item"><div class="flex-item-inner"><div class="flex-item-inner-content">L3
<div class="flex-item"><div class="flex-item-inner"><div class="flex-item-inner-content">L4
<div class="flex-item"><div class="flex-item-inner"><div class="flex-item-inner-content">L5
<div class="flex-item"><div class="flex-item-inner"><div class="flex-item-inner-content">L6
<div class="column" style="margin-left: 20px; border: 1px black solid; height: 500px">其他的东西<div>.容器 {显示:弹性;弹性方向:行;填充:25px;边框:2px 红色实心;}.柱子 {宽度:100%;高度:100%;向左飘浮;}.flex 容器 {填充:0;字体大小:0;边框:1px纯黑色;box-sizing: 边框框;}.flex-item {位置:相对;显示:内联块;高度:0;宽度:100%;填充顶部:100%;边框:1px 黑色实心;字体大小:20px;颜色:黑色;字体粗细:粗体;文本对齐:居中;box-sizing: 边框框;}@media(最小宽度:480px){.flex-item {宽度:33.3333%;填充顶部:33.3333%;}}@media(最小宽度:768px){.flex-item {宽度:16.6666%;填充顶部:16.6666%;}}.flex-item-inner {位置:绝对;显示:弹性;对齐内容:居中;对齐项目:居中;顶部:0;底部:0;右:0;左:0;右边距:25px;背景:白色;边框:1px纯红色;box-sizing: 边框框;}.flex-item-inner-content {边框:1px纯橙色;}.flex-item:last-child .flex-item-inner {右边距:0;颜色:绿色;}
解决方案
这里的主要技巧是将 div
变成一个正方形.
通常设置一个 width
,height
为 0
和一个 padding
等于 宽度
.square {高度:0;宽度:33%;填充底部:33%;背景:浅灰色;}
<div>内容
<小时>现在,当我们添加 display: flex
时,我们不能将 padding
与百分比一起使用(Firefox 错误),我们也不能将高度与百分比一起使用,因为我们使用了高度:0
.
为了克服这些问题,当可以使用视口单位 vw
代替时,我们也可以使用 height
而不是 padding
来保持它平方.
所以,不是像这样设置宽度,calc((100%/6) - 10px);
,为了用大约 10px 宽的装订线平均分布 6 个项目,我们使用这样的视口单位calc(((50vw - 65px)/6) - 10px);
50vw
是浏览器宽度的一半,65px
是 container
的左/右填充之和,50px
,加上 columns
之间的 15px
间距.
这也允许我们跳过额外的 flex-item-inner
元素,跳过在 content
元素上使用 position: absolute
和,因为我们没有在 flex-item
上使用百分比作为高度,我们可以这样做来使内容居中
.flex-item-content {高度:100%;显示:弹性;对齐内容:居中;对齐项目:居中;}
<小时>
最后的结果是这样的
小提琴演示
堆栈片段
.container {显示:弹性;flex-wrap: 包裹;对齐内容:间隔;填充:25px;边框:2px 红色实心;}.柱子 {flex-basis: calc(50% - 15px);}.flex 容器 {显示:弹性;flex-wrap: 包裹;对齐内容:间隔;}.flex-item {位置:相对;flex-basis: calc(((50vw - 65px)/6) - 10px);高度:calc(((50vw - 65px)/6) - 10px);背景:白色;边框:1px纯红色;溢出:隐藏;}.flex-item-content {高度:100%;显示:弹性;对齐内容:居中;对齐项目:居中;}.flex-item:last-child .flex-item-content {颜色:绿色;}.column .other {填充:15px;边框:1px纯黑色;填充底部:35px;}.column.left .other {边距顶部:10px;}.column.right .other:nth-child(n+2) {边距顶部:10px;}@media(最大宽度:768px){.flex-item {flex-basis: calc(((50vw - 65px)/3) - 10px);高度:calc(((50vw - 65px)/3) - 10px);}.flex-item:nth-child(n+4) {边距顶部:12px;}}@media(最大宽度:480px){.flex-item {flex-basis: calc(((50vw - 65px)/2) - 10px);高度:calc(((50vw - 65px)/2) - 10px);}.flex-item:nth-child(n+3) {边距顶部:15px;}}
<div class="左列"><div class="flex-container"><div class="flex-item"><div class="flex-item-content">L1
<div class="flex-item"><div class="flex-item-content">L2
<div class="flex-item"><div class="flex-item-content">L3
<div class="flex-item"><div class="flex-item-content">L4
<div class="flex-item"><div class="flex-item-content">L5<br>L5
<div class="flex-item"><div class="flex-item-content">L6
<div class="其他">其他东西 - 左
<div class="右列"><div class="其他">其他东西 - 对
<div class="其他">其他东西 - 对
I have a page that is 50/50 wide. The left half has a row with six divs.
Criteria:
- 6 squares must always remain square.
- First 5 squares should have margin/padding to right for separation.
- All six squares must stay on same single row. If I can get that to work i can make the needed adjustments for responsiveness in smaller viewports.
- Cross browser compatible for newest version of ie, chrome, and firefox.
My codepen: https://codepen.io/johnsontroye/pen/zzNVBr
Image:
<body>
<div class="container">
<div class="column" style="margin-right: 20px">
<div class="flex-container">
<div class="flex-item">
<div class="flex-item-inner">
<div class="flex-item-inner-content">
L1
</div>
</div>
</div>
<div class="flex-item">
<div class="flex-item-inner">
<div class="flex-item-inner-content">
L2
</div>
</div>
</div>
<div class="flex-item">
<div class="flex-item-inner">
<div class="flex-item-inner-content">
L3
</div>
</div>
</div>
<div class="flex-item">
<div class="flex-item-inner">
<div class="flex-item-inner-content">
L4
</div>
</div>
</div>
<div class="flex-item">
<div class="flex-item-inner">
<div class="flex-item-inner-content">
L5
</div>
</div>
</div>
<div class="flex-item">
<div class="flex-item-inner">
<div class="flex-item-inner-content">
L6
</div>
</div>
</div>
</div>
</div>
<div class="column" style="margin-left: 20px; border: 1px black solid; height: 500px">
Other stuff
<div>
</body>
.container {
display: flex;
flex-direction: row;
padding: 25px;
border: 2px red solid;
}
.column {
width: 100%;
height: 100%;
float: left;
}
.flex-container {
padding: 0;
font-size: 0;
border: 1px solid black;
box-sizing: border-box;
}
.flex-item {
position: relative;
display: inline-block;
height: 0;
width: 100%;
padding-top: 100%;
border: 1px black solid;
font-size: 20px;
color: black;
font-weight: bold;
text-align: center;
box-sizing: border-box;
}
@media (min-width: 480px) {
.flex-item {
width: 33.3333%;
padding-top: 33.3333%;
}
}
@media (min-width: 768px) {
.flex-item {
width: 16.6666%;
padding-top: 16.6666%;
}
}
.flex-item-inner {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin-right: 25px;
background: white;
border: 1px solid red;
box-sizing: border-box;
}
.flex-item-inner-content {
border: 1px solid orange;
}
.flex-item:last-child .flex-item-inner {
margin-right: 0;
color: green;
}
解决方案
The main trick here is to make the div
a square.
Normally one set a width
, the height
to 0
and a padding
that equals to the width
.square {
height: 0;
width: 33%;
padding-bottom: 33%;
background: lightgray;
}
<div class="square">
<div>
Content
</div>
</div>
Now, when we add display: flex
, we can't use padding
with percent (Firefox bug) and we can't use height with percent since we used height: 0
.
To overcome these issues when can use viewport units vw
instead, and with that we can also use height
instead of padding
to keep it squared.
So instead of setting a width like this, calc((100% / 6) - 10px);
, to spread 6 items equally with a gutter about 10px wide, we use viewport units like this calc(( (50vw - 65px) / 6) - 10px);
The 50vw
is half the browser width, the 65px
is the sum of the container
's left/right padding, 50px
, plus the 15px
gutter between the columns
.
This also allows us to skip the extra flex-item-inner
element, skip using position: absolute
on the content
element, and, as we didn't use percent for the height on the flex-item
, we can do like this to center the content
.flex-item-content {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
And the end result is this
Fiddle demo
Stack snippet
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 25px;
border: 2px red solid;
}
.column {
flex-basis: calc(50% - 15px);
}
.flex-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.flex-item {
position: relative;
flex-basis: calc(( (50vw - 65px) / 6) - 10px);
height: calc(( (50vw - 65px) / 6) - 10px);
background: white;
border: 1px solid red;
overflow: hidden;
}
.flex-item-content {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.flex-item:last-child .flex-item-content {
color: green;
}
.column .other {
padding: 15px;
border: 1px solid black;
padding-bottom: 35px;
}
.column.left .other {
margin-top: 10px;
}
.column.right .other:nth-child(n+2) {
margin-top: 10px;
}
@media (max-width: 768px) {
.flex-item {
flex-basis: calc(( (50vw - 65px) / 3) - 10px);
height: calc(( (50vw - 65px) / 3) - 10px);
}
.flex-item:nth-child(n+4) {
margin-top: 12px;
}
}
@media (max-width: 480px) {
.flex-item {
flex-basis: calc(( (50vw - 65px) / 2) - 10px);
height: calc(( (50vw - 65px) / 2) - 10px);
}
.flex-item:nth-child(n+3) {
margin-top: 15px;
}
}
<div class="container">
<div class="column left">
<div class="flex-container">
<div class="flex-item">
<div class="flex-item-content">
L1
</div>
</div>
<div class="flex-item">
<div class="flex-item-content">
L2
</div>
</div>
<div class="flex-item">
<div class="flex-item-content">
L3
</div>
</div>
<div class="flex-item">
<div class="flex-item-content">
L4
</div>
</div>
<div class="flex-item">
<div class="flex-item-content">
L5<br>L5
</div>
</div>
<div class="flex-item">
<div class="flex-item-content">
L6
</div>
</div>
</div>
<div class="other">
Other stuff - left
</div>
</div>
<div class="column right">
<div class="other">
Other stuff - right
</div>
<div class="other">
Other stuff - right
</div>
</div>
</div>
这篇关于响应式 Square Divs 跨浏览器兼容的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文