찾다

 >  Q&A  >  본문

css - calc()设置宽度等于自身的高度?

代码如下:

p{
    height: 50vw;
    width: -moz-calc(height);
    width: -webkit-calc(height);
    width: calc(height);
    background:#c7c7c7;
}




控制台输出结果

calc() 没有这种用法吗 如果没有 该如何让自身宽度等于自身高度呢?

天蓬老师天蓬老师2768일 전771

모든 응답(1)나는 대답할 것이다

  • 阿神

    阿神2017-04-17 11:27:21

    calc里面不能直接用height,要是高度和宽度相等有以下三种方法:

    p{
      width:20vw; /* viewport 的20% */
      height:20vw;
      background-color:green;
      margin-bottom:20px;
    }

    2.

    p{
      width:20%;
      padding-top:20%; /* padding相对于父容器的宽度作为对比 */
      background-color:yellow;
      margin-bottom:20px;
    }

    3.

    p{
      width: 20%;
      background-color:orange;
    }
    p:before{
      content:'';
      padding:50% 0;/* 此时padding相对于width:20%; */
      display:inline-block;
    }

    参考:
    演示

    회신하다
    0
  • 취소회신하다