3

幅が % で設定された css グリッドを使用しようとしています (レスポンシブに使用できるようにするため)、フロートを使用せずに (個人的には嫌いです!)。

この例では、適切な変数が追加されたcsswizardry-gridsを使用しています。githubページにリンクされているデモを表示できます。

グリッドに幅を割り当てるための「コンテナ」クラスについては言及されていないため、.container (これは csswizardry-grids デモにもある) を max-width (後で他のブレークポイントの準備として) とともに追加しました。コンテナーには、内部の .grid__item の padding:left を許可するための左右のパディングがあります。

.container {
    margin: 0 auto;
    padding: 0 $gutter;
    max-width: 960px;
}

scss:

.grid__item {
    display: inline-block;
    padding-left: 32px;
    vertical-align: top;
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.desk--one-third { width: 33.333%; }

また、box-sizing:border-box は、csswizardry-grids.scss によって指定されたものを除いて、他の要素にはありません。

私のマークアップ:

<div class="container"> 
    <div class="grid">
        <div class="grid__item desk--one-third">
            <h1>Column 1</h1> 
        </div>
        <div class="grid__item desk--one-third">
            <h1>Column 2</h1> 
        </div>
        <div class="grid__item desk--one-third">
            <h1>Column 3</h1> 
        </div>
    </div>
</div>

問題: firefox、safari、および chrome では、最後の .grid__item が脱落します。

私が見たもの: 「.grid__item」の間に少なくとも数ピクセルの不思議なギャップがあります。添付のスクリーンショットを参照してください。

!( http://dl.getdropbox.com/u/7408773/Screen%20Shot%202013-05-10%20at%2012.51.06%20AM.png )

誰かが私のためにこれに光を当てることができますか?

4

3 に答える 3

0

この問題は、インライン ブロック要素が単語と見なされるために発生するため、ラッピング要素に負の単語間隔を与えることでシミュレートできます。Chrome / IE9 / FFについてword-spacing: -4px;はうまくいきました:)-ただし-覚えておいてください-これは回避策です。

HTML:

<div class="wrapper">
    <div class="inliner">01</div>
    <div class="inliner">01</div>
    <div class="inliner">01</div>
</div>

CSS:

.inliner{ display: inline-block; }
.wrapper{ word-spacing: -4px; }
于 2013-10-06T11:52:42.880 に答える