CSS diaplay=“grid“未生效与display:block

1、CSS grid可以通过嵌套生成更灵活的页面布局。
参考博客值得收藏的css grid构建复杂布局的小技巧！中代码示例

<p class="container"><p class="item">One</p><p class="item">Two</p><p class="item">Three</p><p class="item inner-grid"><p class="item">i</p><p class="item">ii</p><p class="item">iii</p><p class="item">iv</p><p class="item">v</p><p class="item">vi</p></p><p class="item">Five</p><p class="item">Six</p>
</p>

.container {display: grid;height: 100vh;grid-gap: 10px;grid-template-columns: repeat(auto-fill, minmax(200px, auto))
}
.inner-grid {display: grid;background: white;height: 100%;grid-gap: 5px;grid-template-columns: repeat(3, auto);
}

2、CSS diaplay="grid"未生效
需要实现视频分屏显示，但是之前同事写的代码里使用了diaplay:block和display:none这样的方法控制界面显示。当我开始添加display:grid的内容，则界面无任何变化。而且点击不同分屏按钮，视频播放器的div尺寸忽大忽小，查看浏览器的调试界面：

 <el-main><el-row><el-col :span="20"><div class="video-show1" id="div1"><div class="window1" alt="1"></div></div><div class="video-show4" id="div4" style="display: none"><div class="window4" alt="1"></div><div class="window4" alt="2"></div><div class="window4" alt="3"></div><div class="window4" alt="4"></div></div><div class="video-show9" id="div9" style="display: none"><div class="window9" alt="1"></div><div class="window9" alt="2"></div><div class="window9" alt="3"></div><div class="window9" alt="4"></div><div class="window9" alt="5"></div><div class="window9" alt="6"></div><div class="window9" alt="7"></div><div class="window9" alt="8"></div><div class="window9" alt="9"></div></div><div class="video-show16" id="div16" style="display: none"><div class="window16" alt="1"></div><div class="window16" alt="2"></div><div class="window16" alt="3"></div><div class="window16" alt="4"></div><div class="window16" alt="5"></div><div class="window16" alt="6"></div><div class="window16" alt="7"></div><div class="window16" alt="8"></div><div class="window16" alt="9"></div><div class="window16" alt="10"></div><div class="window16" alt="11"></div><div class="window16" alt="12"></div><div class="window16" alt="13"></div><div class="window16" alt="14"></div><div class="window16" alt="15"></div><div class="window16" alt="16"></div></div></el-col></el-row><el-row><div class="btn_group"><ul><li><input type="button" @click="btn1" class="btn1" title="单屏" /></li><li><input type="button" @click="btn2" class="btn2" title="四屏" /></li><li><input type="button" @click="btn3" class="btn3" title="九屏" /></li><li><input type="button" @click="btn4" class="btn4" title="十六屏" /></li><li><input type="button" @click="showall" class="all" title="全屏" /></li></ul></div></el-row></el-main>

 btn1() {document.getElementById("div1").style.display = "block";document.getElementById("div4").style.display = "none";document.getElementById("div9").style.display = "none";document.getElementById("div16").style.display = "none";},btn2() {document.getElementById("div1").style.display = "none";document.getElementById("div4").style.display = "block";document.getElementById("div9").style.display = "none";document.getElementById("div16").style.display = "none";},btn3() {document.getElementById("div1").style.display = "none";document.getElementById("div4").style.display = "none";document.getElementById("div9").style.display = "block";document.getElementById("div16").style.display = "none";},btn4() {document.getElementById("div1").style.display = "none";document.getElementById("div4").style.display = "none";document.getElementById("div9").style.display = "none";document.getElementById("div16").style.display = "block";},

.window1 {float: left;margin-left: 0.5%;margin-bottom: 0.5%;width: 96%;/* height: 630px; */position: relative;padding-bottom: 50%;background-color: #000;
}.window4 {float: left;margin-left: 0.5%;margin-bottom: 0.5%;width: 48%;height: 300px;position: relative;padding-bottom: 25%;background-color: #000;
}.window9 {float: left;margin-left: 0.5%;margin-bottom: 0.5%;width: 30%;height: 100px;position: relative;padding-bottom: 16.5%;background-color: #000;
}.window16 {float: left;margin-left: 0.5%;margin-bottom: 0.5%;width: 23%;/* height: 0; */position: relative;padding-bottom: 12.3%;background-color: #000;
}

修改内容：
使用v-if 控制界面分屏数的显示，删除display:block相关。

<div class="preview-body_div"><div class="preview-videoshow_div"><div class="preview-video-show1" v-if="video_windows==1" ><div class="preview-window1_div" alt="1"></div></div><div class="preview-video-show4" v-else-if="video_windows==4"><div class="preview-window4_div1" alt="1"></div><div class="preview-window4_div2" alt="2"></div><div class="preview-window4_div3" alt="3"></div><div class="preview-window4_div4" alt="4"></div></div><div class="preview-video-show9" v-else-if="video_windows==9"><div class="window9" alt="1"></div><div class="window9" alt="2"></div><div class="window9" alt="3"></div><div class="window9" alt="4"></div><div class="window9" alt="5"></div><div class="window9" alt="6"></div><div class="window9" alt="7"></div><div class="window9" alt="8"></div><div class="window9" alt="9"></div></div><div class="preview-video-show16" v-else><div class="window16" alt="1"></div><div class="window16" alt="2"></div><div class="window16" alt="3"></div><div class="window16" alt="4"></div><div class="window16" alt="5"></div><div class="window16" alt="6"></div><div class="window16" alt="7"></div><div class="window16" alt="8"></div><div class="window16" alt="9"></div><div class="window16" alt="10"></div><div class="window16" alt="11"></div><div class="window16" alt="12"></div><div class="window16" alt="13"></div><div class="window16" alt="14"></div><div class="window16" alt="15"></div><div class="window16" alt="16"></div></div></div>

    btn1() {this.video_windows=1;    },btn2() {this.video_windows=4;},btn3() {this.video_windows=9;},btn4() {this.video_windows=16;},

.preview-body_div{width:100%;height:100%;display: grid;grid-template-rows:1fr 3rem;grid-template-columns:1fr 25%;
}
.preview-videoshow_div{grid-row: 1/2;grid-column: 1/2;margin-left:2px;margin-right:2px;
}
.preview-video-show1{width:100%;height:100%;
}
.preview-window1_div{width:100%;height:100%;background-color: rgb(43, 41, 41);
}
.preview-video-show4{height:100%;display: grid;grid-template-rows:1fr 1fr;grid-template-columns:1fr 1fr;background-color: rgb(230, 171, 171);
}
.preview-window4_div1{grid-row: 1/2;grid-column: 1/2;background-color: rgb(209, 94, 18);
}
.preview-window4_div2{grid-row:1/2;grid-column: 2/3;background-color: rgb(168, 236, 103);
}
.preview-window4_div3{grid-row:2/3;grid-column: 1/2;background-color: rgb(98, 219, 228);
}
.preview-window4_div4{grid-row:2/3;grid-column: 2/3;background-color: rgb(87, 136, 241);
}

使用CSS还可以合理分割界面，而不会产生之前使用%确定div尺寸时的忽大忽小的情况。

CSS diaplay=“grid“未生效与display:block相关推荐

利用 html 和 css 实现导航栏下拉(display block、display none)
利用 html 和 css 实现导航栏下拉(display block.display none) 需求设计并实现一个导航栏菜单,对某个项目比如你的个人书籍按类别(硬件类.软件类.语言类.网络类等分 ...
html block属性,css display block属性的意思、作用和效果
css中display的block属性是什么意思呢?他是指拥有该属性的html元素以块的方式显示,同时,该元素的前面和后面都会换行,也就是说,如果给一个元素B设置的display:block,那么该元 ...
DIV CSS display (block none inline)属性的用法教程
在一般的CSS布局制作时候,我们常常会用到display对应值有block.none.inline这三个值.下面我们来分别来认识和学习什么时候用什么值.这里通过CSS display知识加实例.图演示 ...
关于JSP页面无法加载css，游览器访问jsp页面样式未生效导致乱序
关于JSP页面无法加载css,游览器访问jsp页面样式未生效导致乱序 1.修改自己过滤器中对编码格式的修改如图: 代码如下: public void doFilter(ServletRequest ...
php display block,CSS display (block inline none )常见属性和用法教程
display 属性规定元素应该生成的框的类型. 这个属性用于定义建立布局时元素生成的显示框类型.对于 HTML 等文档类型,如果使用 display 不谨慎会很危险,因为可能违反 HTML 中已经定 ...
CSS中display:block和display:flax使用记录
CSS中display:block和display:flax使用记录代码: (css) .navigation ul li a{position:relative;width: 100%;text- ...
jQuery修改!important的css样式jQuery修改css未生效
当我们使用jQuery修改带有!important的css样式或者jQuerycss样式未生效可尝试以下解决办法 1.解决办法原有代码: <!DOCTYPE html> <html ...
css未生效,css文件引入后出现某些标签生效某些不生效
如图:style中所写 div banner 下的img 属性没有生效,body的属性未生效但其他div标签属性生效网站目录如下个人空间大家好欢迎来到我的网站. body{ margin: 0; ...
CSS学习笔记（九）display: inline-block，CSS 布局- 水平和垂直对齐
CSS 布局 - display: inline-block display: inline-block 与 display: inline 相比,主要区别在于 display: inline-blo ...

CSS diaplay=“grid“未生效与display:block

CSS diaplay=“grid“未生效与display:block相关推荐

最新文章

热门文章