首页 分享 css设置高度=宽度,响应式

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

来源:花匠小妙招 时间:2026-02-12 21:35

最新推荐文章于 2025-07-29 15:28:11 发布

转载 于 2017-03-02 12:24:00 发布 · 558 阅读

· 0

· 0 ·

CC 4.0 BY-SA版权

做九宫格时遇到的问题

分别使用的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

转载于:https://www.cnblogs.com/kekeximi/p/6489955.html

相关知识

构建响应式花店网站:HTML5/CSS3毕业设计项目
构建B2C响应式电子商务网站的全面指南
HTML前端开发
CSS 1 ,移动端适配,使用媒体查询实现移动端适配,meta标签的使用(min
不再困惑,响应式网页设计一篇读懂!
CSS网页响应式布局 自动适配Pc/Pad/Mobile设备
基于Viewport的移动端web屏幕适配方案详解1. 前言 随着手机,平板等移动设备的普及,现如今的绝大多数web应用
vue如何适配移动端
Python移动端页面适配四大方式
基于Viewport的移动端web屏幕基本适配方案详解

网址: css设置高度=宽度,响应式 https://www.huajiangbk.com/newsview2559989.html

所属分类:花卉
上一篇: 丰花月季/爬藤月季高度40
下一篇: 粉花绣线菊和金山绣线菊区别 图片

推荐分享