css设置高度=宽度,响应式


做九宫格时遇到的问题

分别使用的float和flex来布局

主要问题在于当宽度自适应时如何让高度等于宽度。

首先想到的是与宽度一样设置高度自适应,如要为每个九宫格设置百分数的高度,要使它有效,则要设置父元素高度,若父元素仍然为百分数则要依次设置每一级的父元素高度,全为百分数的话,最后一级html必须设置height:100%;的百分数高度才有效。

但是,这时不能让高度一直等于宽度,因此采用另外的方式。

由于padding、margin等都是基于本身元素来设置的,可以通过height:0;padding-bottom:(小格子的宽如30%);来设置,此时就能保证高=宽

再想到若是子格存在子元素会怎样,实验了一下不影响什么

代码:https://github.com/dakeke/responsive--page/tree/master/others/sudoku

demo:https://dakeke.github.io/responsive--page/others/sudoku


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM