5

http://csswizardry.com/2013/02/introducing-csswizardry-grids/とそのデモ ( http://csswizardry.com/csswizardry-grids/ ) を見たところです。これは、CSS でグリッドを解決するための非常に優れたアプローチだと思います。それで、ソースコードをチェックアウトして、それがどのように行われたかを確認しました.1つの小さなことを見ましたが、それがどのように行われたかを実際には理解できません.

この Grid System は float ではなく inline-block 要素を使用しています。これは良いことです。しかし、パーセンテージ幅の列/グリッドなどにインラインブロックを使用するたびに、このインラインブロックの間隔があります。このスペースを取り除くにはいくつかの方法があります (主に HTML の変更のみ) 。

しかし、グリッドシステムでは、(私が見る限り)これらの修正はなく、ソースコードを確認してもインラインブロックの間隔はまったくないことを示しました。ここで私が主に抱えている問題を示すために、簡単なフィドルがあります：http://jsfiddle.net/nN8mV/

HTML

<p>Floating columns (width 33.3%)</p>
<div class="grid cf">
    <div class="grid__item">Test</div>
    <div class="grid__item">Test</div>
    <div class="grid__item">Test</div>
</div>
<p>Inline Block columns (width 33.3%)</p>
<div class="grid grid--inlineblock">
    <div class="grid__item">Test</div>
    <div class="grid__item">Test</div>
    <div class="grid__item">Test</div>
</div>

CSS

.grid {
    margin-bottom: 20px;
}
    .grid__item {
        float: left;
        width: 33.3%;  
        background: red;
    }
    .grid--inlineblock .grid__item {
        float: none;
        display: inline-block;
    }

ご存知かもしれませんが、33.3% の幅は、この間隔のために機能しません。「display: inline-block」も使用していますが、グリッド システムにはこの問題はないようです。私の質問: CSS Wizardy はこの問題をどのように解決しましたか? 私はそれを理解することができず、HTML の変更 (上記の CSS トリックのリンクを参照) は、HTML を適応させることができない CMS によって生成されたコンテンツまたはその他のもののために、実際にはあまり機能しません。

よろしくお願いします。

4

4 に答える 4

4

リンクした Csswizardry のデモでは、コメント HTML ハックを使用しています。

<div class="grid__item"></div><!--
--><div class="grid__item"></div>

彼らのデモソースをチェックしてください。

また、jsfiddleを更新しました

于 2013-09-06T13:00:48.687 に答える
0

次のことができます。

.grid--inlineblock {
   word-spacing: -4px;
}

そして、子アイテムで単語間隔をリセットします

.grid--inlineblock .grid__item {
    float: none;
    display: inline-block;
    word-spacing: normal;
}

このフィドルをチェックアウトできます。

これが最善の手法かどうかはわかりませんが、うまく機能しているようです。

于 2014-01-28T09:31:27.543 に答える