【hover子元素(div="bastard")没有办法居中 _定位】

hover子元素(div="bastard")没有办法居中

我也踩过这个坑( 1 )

已统计您的踩坑,无需重复点击

回答(1)

定位

详细描述

截图

代码

css:
.grandpa{ 
    background: #29bde0;
    /*width: 90%;
    height: 90%;*/
    
    display: grid;
    grid-gap: 1px;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
    grid-auto-flow: row;
    margin: 10px auto;
  }  
      
  .dad{
      width: 31vw;
      height: 31vw;
      background: #29bde0;
  }  
  
  .son{
      width: 20vw;
      height: 20vw;
      background: yellow;
      margin: 0 auto;
      display: flex;
      flex-direction:column;
      background: #f5c97b;
      border: 2px solid white;
  }
  .para1{
      flex:2;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  .para2{
      flex:1;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #83b09a;
      color: white;
  }
  
  .bastard{
      width: 20vw;
      line-height: 10vw;
      margin: 0 auto;
      background: #29bde0;
      display: none;
      
  }
  .bastard img{
      width: 4vw;
      height: 4vw;
      margin-right: 1px;
  }
  /*hover the son element*/
  .dad:hover>.bastard{
      display: block;
  }
  
html:
<div class="grandpa">

        <div class="dad">
            <div class="son">
                <span class="para1">水民</span>
                <span class="para2">1号</span>
            </div>
            <div class="bastard">
                <img src="./p2-sprite1.png"><img src="./p2-sprite2.png"><img src="./p2-sprite3.png"><img src="./p2-sprite4.png">
            </div>
        </div>

编辑于2024-04-26

时间排序

热门排序

[成都|荣耀师兄]JS-胡力耘
0

1. img是行内元素，margin对其不起作用，需要对img元素设置display:inline-block，使其为行内块级元素；
2. 在父元素盒子中采用flex弹性布局，justify-content设置为space-between属性；
3. 建议这四个小图标采用雪碧图（CSS Sprite）的方式来实现，以减少对服务器的请求数。

查看全部>

编辑于2018-06-02

去第页