响应方形Div跨浏览器兼容 [英] Responsive Square Divs Cross Browser Compatible
本文介绍了响应方形Div跨浏览器兼容的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
标准：
- 6个方格必须始终保持平方。
- 前5个方格应该有margin / padding来分隔。
- 所有六个方格必须保持在同一行上。如果我能做到这一点，我可以在较小的视口中对响应进行必要的调整。
- 跨浏览器兼容最新版本的ie，chrome和firefox。 $ b
我的codepen： https：// codepen.io/johnsontroye/pen/zzNVBr
< body> =nofollow noreferrer>
< div class =container>
< div class =columnstyle =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 =columnstyle =margin-left：20px; border：1px black solid; height：500px>
其他的东西
< div>
< / body>
.container {
display：flex;
flex-direction：row;
padding：25px;
border：2px红色固体;
}
.column {
width：100％;
身高：100％;
float：left;
}
.flex-container {
padding：0;
font-size：0;
border：1px纯黑色;
box-sizing：border-box;
}
.flex-item {
position：relative;
display：inline-block;
height：0;
宽度：100％;
padding-top：100％;
border：1px黑色固体;
font-size：20px;
颜色：黑色;
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;
剩下：0;
margin-right：25px;
背景：白色;
border：1px纯红色;
box-sizing：border-box;
}
.flex-item-inner-content {
border：1px solid orange;
}
.flex-item：last-child .flex-item-inner {
margin-right：0;
颜色：绿色;
解决方案
正常情况下，设置宽度， height 到 0 和一个 padding 等于宽度
.square {height：0;宽度：33％;垫底：33％;背景：lightgray;}
< div class =square > < DIV>内容< / div>< / div>
$ b
现在，当我们添加 display：flex 时，我们不能使用 padding 与百分比（Firefox的错误），我们不能使用高度百分比，因为我们使用身高：0 。
为了克服这些问题，可以使用视口单元 vw 来代替，而且我们也可以使用 height 来代替 padding 保持平方。
所以不是像这样设置宽度， 100％/ 6） - 10px）; ，使用宽度大约10px的阴影线平均分散6个项目，我们使用像这样的视口单位（（（50vw - 65px）/ 6） - 10px）;
50vw 是浏览器宽度的一半， 65px 是容器的左/右填充值， 50px ，加上栏之间的 15px 排水沟。
这也允许我们跳过t在内容元素上跳过，使用位置：绝对 / code>元素，并且，因为我们没有在 flex-item 上使用百分比来表示高度，所以我们可以这样做， p>
.flex-item-content {
height：100％;
display：flex;
justify-content：center;
align-items：center;
$ p 最后的结果是这
堆栈片段
。容器{display：flex; flex-wrap：wrap;证明内容：空间之间; 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）;高度：calc（（（50vw - 65px）/ 6） - 10px）;背景：白色;边框：1px纯红色; overflow：hidden;}。flex-item-content {height：100％;显示：flex; justify-content：center; align-items：center;}。flex-item：last-child .flex-item-content {color：green;}。column .other {padding：15px;边框：1px纯黑色; 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）;高度：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）;高度：calc（（（50vw - 65px）/ 2） - 10px）; } .flex-item：nth-child（n + 3）{margin-top：15px; }
< div class =container> < div class =left 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< L5< / div> < / DIV> < div class =flex-item> < div class =flex-item-content> L6< / div> < / DIV> < / DIV> < div class =other>其他的东西 - 左< / div> < / DIV> < div class =column right> < div class =other>其他的东西 - 正确< / div> < div class =other>其他的东西 - 正确< / div> < / div>< / div>
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: enter image description here
<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
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>
这篇关于响应方形Div跨浏览器兼容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
