对于一个项目,我需要创建一个由其他矩形(6)的螺旋组成的矩形,就像黄金比例矩形一样。
我使用flexbox来做这件事,因为我觉得这是最干净的方法。
当我在我的PC上测试它(firefox,chrome,IE,Safari)时,它在Firefox和IE上运行良好(我认为最好的是IE实际上是我正在尝试做的事情),但是在chrome( v41),它不起作用。
在智能手机上,我尝试使用Firefox(它可以正常工作),但是当我尝试使用android的股票浏览器或者在Android上使用Chrome时,它在PC上具有与Chrome相同的渲染(模块相互重叠,第6个完全在页面的底部)。
这是源代码: HTML:
<div id="board-view" class="board-module-container bleft">
<div class="board-module">
Module 1
</div>
<div class="board-module-container bbottom">
<div class="board-module">
Module 2
</div>
<div class="board-module-container bright">
<div class="board-module">
Module 3
</div>
<div class="board-module-container btop">
<div class="board-module">
Module 4
</div>
<div class="board-module-container bleft">
<div class="board-module">
Module 5
</div>
<div class="board-module-container bbottom">
<div class="board-module">
Module 6
</div>
<div class="board-module-container bright">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
#board-view {
height: 100%;
}
.board-module-container {
height: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 3892;
-webkit-flex: 3892;
-ms-flex: 3892;
flex: 3892;
}
.board-module-container.bleft {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
}
.board-module-container.bright {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-webkit-flex-direction: row-reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
.board-module-container.btop {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.board-module-container.bbottom {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-webkit-flex-direction: column-reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}
.board-module {
-webkit-box-flex: 6108;
-webkit-flex: 6108;
-ms-flex: 6108;
flex: 6108;
border: solid 1px black;
background-color: white;
}
我不知道为什么它不起作用。 Caniuse说它与智能手机浏览器兼容......
以下是实时版:http://infolimon.iutmontp.univ-montp2.fr/~philipb/ColorMyMood/
希望你能找出问题所在:)