分享
三行代码  ›  专栏  ›  技术社区  ›  heliya rb

css计算函数不居中

  •  0
  • heliya rb  · 技术社区  · 6 月前

    我需要对宽度使用calc函数,但是 不会分裂 HTML格式 :

    <div class="container-card">
        <div class="container-holder"></div>
    </div>
    

    scss系统 :

     .container-card {
        background-color: grey;
        height: 500px;
        .container-holder {
          background-color: gold;
          width: calc(100% - 14px);
          height: 300px;
        }
      }
    

    下面是一个例子: https://jsfiddle.net/fze3L0w8/

    我需要14像素左右的距离

    6 回复  |  直到 6 月前
        1
  •  2
  •   Ijaz Ali    6 月前

    你可以用 margin:auto; 从两边增加空间。你需要设置它 100% - 28px

    .container-card {
        background-color: grey;
        height: 500px;
       
      }
       .container-holder {
          background-color: gold;
          width: calc(100% - 28px);
          height: 300px;
          margin: auto;
        }
    <div class="container-card">
        <div class="container-holder">
    
        </div>
      </div>
        2
  •  2
  •   Saeed Jamali    6 月前

    background-color: gold;
    width: calc(100% - 28px);
    height: 300px;
    margin: auto;
    

    你还需要从左到右的边距

        3
  •  1
  •   Robby Cornelissen    6 月前

    只需设置14px的边距,就不再需要设置 width

    .container-card {
        background-color: grey;
        height: 500px;
        .container-holder {
          background-color: gold;
          margin: 14px;
          height: 300px;
        }
    }
    

    这是最新的 fiddle .

        4
  •  1
  •   Ahmed Yousif    6 月前

    你需要设置它 100% - 28px 14px 正确的 左边 margin: 14px;

    .container-card {
        background-color: grey;
        height: 500px;
        .container-holder {
          background-color: gold;
          width: calc(100% - 28px);
          margin: 14px;
          height: 300px;
        }
      }
    
        5
  •  0
  •   Or Ben-Yossef    6 月前

    更优雅的解决方案是-

    .container-card {
        background-color: grey;
        height: 500px;
        .container-holder {
          background-color: gold;
          width: calc(100% - 28px);
          height: 300px;
          margin: 0 auto;
        }
      }
    

    margin: 0 auto;

        6
  •  0
  •   Dominic    6 月前

    只需将容器放在中心,而不是像flex这样的硬编码易碎方法,然后就可以使用您想要的任何边距,而不会中断。

    .container-card {
      display: flex;
      justify-content: center;
      background-color: grey;
      height: 500px;
    }
    .container-holder {
      background-color: gold;
      margin: 0 14px;
      width: 100%;
      height: 300px;
    }
     <div class="container-card">
        <div class="container-holder">
    
        </div>
      </div>