置中部分

Question

我在將「#offer」分隔在「.tight」部分中出現問題。我不想用「位置：絕對的」因爲在1024像素寬度的屏幕中可以正確顯示網站。

這裏的HTML：

<section class="main"> 
    <section class="tight"> 
     <div id="offers"> 
     <article class="offer"> 
      <div id="offer_stats"></div> 
      text 
     </article> 
     <article class="offer"> 
      <div id="offer_comp"></div> 
      text 
     </article> 
     <article class="offer last"> 
      <div id="offer_time"></div> 
      text 
     </article> 
     </div> 
    </section> 
</section> 

而CSS：

section.main { 
    min-width: 880px; 
    max-width: 1200px; 
    margin: 0 auto; 
} 
section.tight { 
    width: 100%; 
    margin: 0 auto; 
    float: left; 
} 
#offers { 
    float: left; 
    padding-bottom: 100px; 
    text-align: center; 
} 
article.offer { 
    float: left; 
    min-height: 178px; 
    width: 260px; 
    color: #59535e; 
    padding-right: 50px; 
} 
article.offer.last { 
    padding-right: 0; 
} 
article.offer div { 
    height: 178px; 
} 
#offer_stats { 
    background: url("../images/offer_stats.png") no-repeat; 
} 
#offer_comp { 
    background: url("../images/offer_comp.png") no-repeat; 
} 
#offer_time { 
    background: url("../images/offer_time.png") no-repeat; 
} 

的PRINTSCREEN：

有什麼建議？

Answer 1

section.main { 
    width: 880px; 
    max-width: 1200px; 
    margin: 0 auto; 
} 

Answer 2

首先，我建議你從#offers

#offers { 
    padding-bottom: 100px; 
    text-align: center; 
} 

二去除float: left;，我建議你使用display: inline-block;代替float: left;在article.offer

article.offer { 
    display: inline-block; 
    min-height: 178px; 
    width: 260px; 
    color: #59535e; 
    padding-right: 50px; 
} 

看到這個jsfiddle