-1

#offersection 内でdiv を中央に配置する際に問題が発生しました.tight。横幅の画面position: absolute;でサイトが正しく表示される可能性があるため、使用したくありません。1024px

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;   
}

プリントスクリーン: ここに画像の説明を入力

助言がありますか？

4

2 に答える 2

2 
section.main {
  width: 880px;
  max-width: 1200px;
  margin: 0 auto;
}
于 2013-09-23T18:46:27.227 に答える
0

float: left;まず、から削除することをお勧めします#offers 

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

第二に、 indisplay: inline-block;の代わりに使用することをお勧めしますfloat: left;article.offer

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

このjsfiddleを参照してください

于 2013-09-23T20:45:47.303 に答える