html - 如何让我的容器自动关闭页面

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>

这是我的 fiddle :http://jsfiddle.net/5gronvk1/1/

Answer 1

使用以下内容更新 CSS 中的以下选择器:

.container {
    height: 100%;
}

和

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