文章/答案/技术大牛

发布

社区首页 >问答首页 >自举比率

问自举比率
EN

Stack Overflow用户

提问于 2017-07-06 20:10:41

回答 2查看 2.3K关注 0票数 2

我想要建立一个卡片样式的布局。这些卡应具有标准TCG卡的纵横比。

因此，对于一个方面服务，我发现我必须添加

padding-top: 39.68%;

在plunkr中，我已经构建了这个。它在of sm-3的初始状态下工作得很好，但是一旦我切换到of xs-2，纵横比就完全不同了。

如果你调整它的大小，你会明白我的意思。

Plunkr

css

twitter-bootstrap

回答 2

Stack Overflow用户

回答已采纳

发布于 2017-07-17 11:52:04

您不应该将填充直接应用于具有指定宽度的元素-宽度需要为auto才能使填充起作用，并且表示TCG卡的纵横比。

TCG卡的尺寸为63x88 mm。要获得高度的百分比，请将高度除以宽度- 88 / 63 = 139%。

由于您不想将其应用于卡片本身，因此将该填充应用于一个伪元素，这将控制它所应用到的卡片的高度。

/* Styles go here */
.card {
    background-color: grey;
    border: 3px solid;
}
.card:before {
  content: '';
  width: 1px;
  padding-bottom: 139.68253968%;
  display: block;
}

<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap@*" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div class="container">
      <div class="row">
        <div class="col-sm-2 card col-xs-3">
          1
        </div>
        <div class="col-sm-2 card col-xs-3">
          2
        </div>
        <div class="col-sm-2 card col-xs-3">
          1
        </div>
        <div class="col-sm-2 card col-xs-3">
          2
        </div>
        <div class="col-sm-2 card col-xs-3">
          1
        </div>
        <div class="col-sm-2 card col-xs-3">
          2
        </div>
        <div class="col-sm-2 card col-xs-3">
          1
        </div>
        <div class="col-sm-2  card col-xs-3">
          2
        </div>
        
      </div>
    </div>
    
  </body>

</html>

票数 1

Stack Overflow用户

发布于 2017-07-14 15:08:56

根据您提供的纵横比，即56:81的卡片高度应为81/56*width。卡的宽度根据引导类col-xs-3(16.666667%)和col-sm-2(25%)而变化。

我们可以通过将其作为div的填充来保持上面提到的高度。现在，如果我们向div添加任何内容，那么div incereses的高度，为了避免这种情况，请在div中添加一个包装器。

填充百分比是24.1%，即sm和36.16%的81/56 *16.66667，即xs的81/56 *25%

.card-wrapper {
    padding-top: 24.1%;
    background-color: grey;
    border: 3px solid;
    position: relative;
}

.card-content {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right:0;
}

@media (max-width: 767px) {
  .card-wrapper {
    padding-top: 36.16%;
  }
}

<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap@*" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div class="container">
      <div class="row">
        <div class="col-sm-2 card-wrapper col-xs-3">
          <div class="card-content">
            1        
          </div>
        </div>
        <div class="col-sm-2 card-wrapper col-xs-3">
          <div class="card-content">
            2        
          </div>
        </div>
        <div class="col-sm-2 card-wrapper col-xs-3">
          <div class="card-content">
            1        
          </div>
        </div>
        <div class="col-sm-2  card-wrapper col-xs-3">
          <div class="card-content">
            2        
          </div>
        </div>
        <div class="col-sm-2 card-wrapper col-xs-3">
          <div class="card-content">
            1        
          </div>
        </div>
        <div class="col-sm-2 card-wrapper col-xs-3">
          <div class="card-content">
            2        
          </div>
        </div>
        <div class="col-sm-2 card-wrapper col-xs-3">
          <div class="card-content">
            1        
          </div>
        </div>
        <div class="col-sm-2  card-wrapper col-xs-3">
          <div class="card-content">
            2        
          </div>
        </div>
        
      </div>
    </div>
    
    
  </body>

</html>

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/44948520

复制

相似问题

问自举比率
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问自举比率EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问自举比率
EN