-1

以下のようなコラムがあります。float propertyまたはでそれを行うのがベストプラクティスinline-blockですか?

+----------------+--------------------+-------------------+
|     col1       |      col2          |    col3           |
|                |                    |                   |
+---------------------------------------------------------+

float プロパティと display プロパティは何をしますか? また、いつ使用する必要がありますか?

4

3 に答える 3

1

CSS フロートを使用すると、要素を左また​​は右に押し込むことができ、他の要素がその要素を囲むことができます。

Float は画像によく使用されますが、レイアウトを操作するときにも役立ちます。

フロートの問題

CSS コードに float がある場合の問題は、周りの要素が float 要素を取り囲むようにするための予防策を講じる必要があることと、コード内の次の要素がその隣に忍び寄らないようにすることです。もう 1 つの問題は、(視覚的に言えば) 複数の行を占める浮動リストがあり、コンテンツの高さがさまざまである場合、あなたは大変なことになるということです。

ここで、display プロパティの魔法の値 inline-block が活躍します。基本的に、これは要素をインラインにする方法ですが、幅と高さ、上下のマージン、パディングなどの設定などのブロック機能を保持します。簡単な例は次のようになります。

ここを見る

于 2013-04-28T10:35:31.763 に答える
0

ない。古き良き IE5 の時代に戻ると、フロートは伝統的にこれに使用されていました。同じ高さの列が必要な場合display: table-cellは、最善の策です。

http://tinker.io/619bf/1

于 2013-04-28T12:07:48.627 に答える
0

浮動列は、より一般的で伝統的なアプローチです。Bootstrap と Foundation はどちらも float を使用します。ただし、各方法には欠点があり、どの欠点を受け入れたいかによって、どのルートを取るかが決まります。個人的にはインラインブロックの方が好きです。

浮き輪

フロートはセットアップが簡単です。これらのフロートの親要素にこのコードを追加すると、折りたたまれません。

.parent:after {
    display: block;
    content: ".";
    clear: both;
    height: 0;
    visibility: hidden;
    font-size: 0;
}

これを列 1、2、および 3 に追加してフロートにし、個々の幅を与えます。

col1, col2, col3 {
    display: block;
    float: left;
}

border-boxまた、パディングと境界線がグリッドを折りたたまないように追加することを検討することもできます。

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

フロートには、インライン ブロックが本来持つ余分な空白の問題がないため、合理的な選択ですが、JavaScript を使用しないインライン ブロックでできるように、フロートで縦方向に配置することはできません。

インラインブロック

インライン ブロックには、修正しなければならない空白の問題がありますが、見返りとして、要素の垂直位置を制御できるようになります。また、インライン ブロックの親は折りたたまれません。

col1, col2, col3 {
    display: inline-block;
    margin-right: -0.25em; //This removes the white space created by the "inline" properties of this display type
    vertical-align: top; //Inline-block naturally aligns to the bottom, so this will give it more expected behavior.
}

親に対して特別なことをする必要はなく、他の要素が親とどのように相互作用するかについてそれほど心配する必要はありません。しかし、どちらの方法も効果的で、インライン ブロックだけがもう少し有能です。

于 2014-04-04T01:42:10.770 に答える