Question

如果容器超出页面宽度，如何使我的容器自动下降？如果您查看jsfiddle，则页面背景为黑色，其大小为780px。所有两张信用卡都显示在页面上。谢谢。

我的CSS如下：

<div style="width:780px;background:#000">

<div class="container">
    <div class="sleeve">
      <div class="credit-card">
        <div class="card-company">West Frodo</div>
        <div class="card-number">
          <div class="digit-group">4141 7204 9012 0029</div>
        </div>
        <div class="card-expire"><span class="card-text">CVC</span> 321 <span class="card-text">Expires</span> 12/24</div>
        <div class="card-holder">John P. Smith</div>
        <div class="card-type">Debit card</div>
      </div>
    </div>
    <div class="sleeve">
      <div class="credit-card selected" style="background: #555">
        <div class="card-company">West Frodo</div>
        <div class="card-number">
          <div class="digit-group">4234 1302 3798 0265</div>
        </div>
        <div class="card-expire"><span class="card-text">CVC</span> 321 <span class="card-text">Expires</span> 12/24</div>
        <div class="card-holder">John P. Smith</div>
        <div class="card-type">Debit card</div>
      </div>
    </div>
    <div class="sleeve">
      <div class="credit-card" style="background: #3B3">
        <div class="card-company">West Frodo</div>
        <div class="card-number">
          <div class="digit-group">4812 0322 0517 2840</div>
        </div>
        <div class="card-expire"><span class="card-text">CVC</span> 321 <span class="card-text">Expires</span> 12/24</div>
        <div class="card-holder">John P. Smith</div>
        <div class="card-type">Debit card</div>
      </div>
    </div>
    <div class="sleeve">
      <div class="credit-card" style="background: #3B3">
        <div class="card-company">West Frodo</div>
        <div class="card-number">
          <div class="digit-group">4812 0322 0517 2840</div>
        </div>
        <div class="card-expire"><span class="card-text">CVC</span> 321 <span class="card-text">Expires</span> 12/24</div>
        <div class="card-holder">John P. Smith</div>
        <div class="card-type">Debit card</div>
      </div>
    </div>
</div>

</div>

这是我的小提琴：http://jsfiddle.net/5gronvk1/1/

Answer 1

使用以下命令更新CSS中的以下选择器：

.container {
    height: 100%;
}

和

.sleeve {
    display: inline-block;
    margin: auto;
}

我如何使我的容器自动掉下页面

1 个答案: