15

私はカスタムグリッドをいじくり回していて、他の人がどのようにグリッドシステムを作成したかを見たかったのです。Twitterのブートストラップはとても人気があるようだったので、私はそのコードを見てきました。なぜ彼らはフロートを使っているのだろうか？私はdisplay: inline-block;html要素のいずれかdisplay: inline;を使用するか、display: block;フロートを避けようとします。しかし、何らかの理由で、ブートストラップの作成者はフロートを使用することにしました。最初に私は、ie6がサポートしておらず、ie7がデフォルトdisplay: inline-block;の要素でのみサポートしているため、下位互換性を保つためにそれらを使用していると考えていました。display: inline;しかし、ie6は多かれ少なかれゲームから外れており、*ズーム：1を使用するマイクロクリアフィックスハックを使用しているためです。ie6 + IMOをターゲットにすると、同じものを複製できますdisplay: inline-block;*display: inline; *zoom: 1;それで最後の質問はなぜディスプレイインラインブロックの上に浮かぶのですか？私が上で言及しなかった彼らが解決しようとした問題はありますか？

4

3 に答える 3

16

インラインブロックは空白を認識し、実際のコンテンツの自動幅を持ち、HTMLの順序でスタックします。フロートは、clearfixメソッドを必要としませんが、ブロック要素に基づいています。これらの要素には、使用可能なスペースの水平方向の自動幅があります。純粋に意味論的には、空白を認識する形式と順序の重要性のため、インラインブロックは意味論的ではありません。しかし、純粋に機能的な方法でそれを見ると、どちらもグリッド用に作成されていません。また、疑似CSSがなければ、非セマンティックHTMLタグのclearfixeもあります。ですから、私は彼らがどちらも勝者ではないと信じています。しかし、フレックスボックスが今後数年間で必須になる当面の代替手段はありません。

インラインブロックの場合：

<div>
    <div style="display:inline-block; width:30%;">col1
    </div><div style="display:inline-block; width:70%;">col2</div>
</div>

側溝を取り除くには、タグを接着/追加する必要があります。コンテナdivは、アイテムを別の行の一部にするために必要です。

フロート付き：

<div class="clearfix">
    <div style="float:left; width:30%;">col1</div>
    <div style="float:left; width:70%;">col2</div>
</div>

「行」を強制するには、Clearfixが必要です（フロートの後に通常のフローアイテムの問題またはフロートをすべて却下します）

どちらを使用するかは、目標（および好み）の問題です。両方の列幅を知っているか、相対サイズ（％）を使用している限り、フロートよりもインラインブロックが好きだと言わなければなりません。clearfixを使用したフロートよりも直感的で予測可能だと思います。これは、使用方法によって使用された場合でも問題にならない問題の修正です。インラインブロックの空白認識のみが、ファンキーなhtmlの使用を強制します。 、それは欠点です。

皮肉なことに、テーブルはこれらすべて（および列の高さや垂直方向の配置）を問題なく実行します。インラインブロックを順番に配置する必要があるため、ここで説明する動機があります。

レスポンシブ、インラインブロックのテーブル「損失」について話している場合。デスクトップに4列あり、タブレットに2列、モバイルに1列が必要だとします。インラインブロックを使用すると、「ちょうど」列に他の幅の寸法を与えることができ、うまく折りたたむことができます（折りたたむときの余白に注意してください）。テーブルを使用すると、実際の行にバインドされますが、これは非常に頑固な場合があります。Flexboxは長い間必要とされ、美しく見えます。特定の状況で柔軟にレイアウトを調整できます。

ブートストラップは、彼らがどのように何かをしたかを学ぶのに便利です。3.0で読むだけで、相対的なグリッドサイズを使用しています。これにより、ネストされたグリッドと位置合わせに問題が発生します。

----  --a-  ----  ----
---b------
....  ..c.

列aは通常の親列です。列cは、bの子ネストされた列です。パディングとボーダーボックスモデルを使用していない限り、ガターはコンテナによって可変であるため、cを相対的なサイズに合わせるのは困難です。しかし、そうすると、柔軟性が大幅に失われます。colに背景とパディングを持たせたい場合は、グリッドシステムを台無しにしているため、スタイルを設定したコンテナーを使用する必要があります。これにより、コードが乱雑になります。彼らがこれに対する解決策を見つけたかどうか私は研究していません。まだです。私は固定ピクセルに行きましたが、それはレスポンシブデザインでは、いくつかの固定幅しか持てず、モバイル周辺のすべてに相対グリッドを使用することを意味します。

于 2013-01-27T13:00:25.200 に答える
2

私は、 Pure（以前のYahoo YUI Grid）などdisplay: inline-block;ではなくを使用するグリッドシステムを好みます。これは、余分なスタイルなしで国際化するためです。テキストの方向を右から左に変更すると、レイアウトが自動的に反転します。フロートはこれを行いません。フロートはまた、他のクロスブラウザの奇妙なことをクリアする必要性をもたらします。Pureによって示されているように、過大になっている可能性のある不正確さはすべて修正できます。レイアウトに使用することを意図していない批判については、おそらくクロスブラウザセンタリングの使用も禁止する必要があります。セマンティックWebという用語かどうかも疑問に思いますfloatinline-blockfloatdisplay: inline-block;display: table;この用語は主にHTMLに関係し、その要素と属性を使用して機械可読な意味を与えるため、実際にはCSSに適用されます。CSSの要点は、セマンティックHTMLを必要に応じて根本的にスタイル設定することです。したがって、CSSZenGardenのような古典的なサイトです。

この手法がバグを悪用せず、ユーザーやデバイスのコンテンツを妨害せず、十分にサポートされている限り、それは許容できると私は言います。Stu NichollsのCSSPlayのように、CSSを非正統的ではあるが、サポートされている方法で使用できない理由はありません。

興味深いことに、Flexible Boxは、最新のブラウザー（≥IE10および同等のブラウザー）と互換性のある優れたレイアウトシステムであるPureグリッドにも組み込まれています。

于 2015-08-16T18:49:25.430 に答える
-3

セマンティックWebの用語では、テキストの行内のdisplay: inline-blockようにブロックレベルの要素を配置する場合に使用する必要があります。<img>ページをメインレイアウトにするためにインライン配置を使用するべきではありません。の要素は、親要素のやのdisplay: inline-blockようなプロパティからも有効になります。これにより、ページレイアウトの精度が低下します。ページのメインレイアウトを作成するときではなく、使用する習慣を身に付けたほうがよいでしょう。font-sizeline-heightfloatinline-block

于 2013-01-03T22:25:39.593 に答える