コンテンツ
真夜中です div あなたのサイトではまだ子供のおもちゃのたんすのように見えます。すべての要素はごちゃごちゃした混乱であり、CSSで遊ぶたびに 表示 プロパティ、彼らは彼ら自身を全く異なるナンセンスのビットに再配置します。
あなたが私のようなら、あなたはおそらく息を切らしてつぶやき、キーボードで一貫してより攻撃的になることによってこれを解決するでしょう。その戦略は以前はうまくいきましたが、最近、より良い方法を見つけようと試みました。 表示 プロパティ。
それはの基本を明らかにします 表示 当初思っていたよりずっと簡単です。実際、彼らはスーツケースを梱包するのと同じ原則を使用しています。カバーします 表示ブロック, インラインブロック そして 列をなして。以前にスーツケースを整然と配置したことがある場合は、類似点が表示されます。あなたがすべての服を無計画に突っ込むような人なら、まあ、私があなたのためにできることはたくさんあります。
私たちのスーツケースには、次の3種類の衣類が含まれます。
- 襟付きシャツのように繊細
- 巻き上げ可能なTシャツ
- 隙間に詰めることができる靴下や下着
参考までに、スーツケースをHTMLでモデル化すると、次のようになります。
div class = 'suitcase'> div class = 'delicate'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'socks'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tシャツ'> / div> / div>
上の繊細なアイテム
表示ブロック ほとんどのHTML要素のデフォルトです。これは、要素がコンテナ内の水平方向のスペース全体を占めることを意味します div。それが他の兄弟要素の隣にある場合、それは新しい行を開始し、その行の他の要素を許可しません。それはあなたがあなたのスーツケースの上部に置く繊細なアイテムに似ています。これらは、襟付きシャツなどの繊細でスマートな商品です。しわが寄らないようにするため、他の衣類に押し付けられないようにします。
これはの最も難しい部分の1つをもたらします 表示ブロック。襟付きのシャツがスーツケースの幅全体を占めていないことに気づきましたか？それは他のアイテムがそのレベルにジャンプするという意味ではありません。このシャツがスーツケースの幅の60％だとしましょう。それでも、他の要素がトップレベルで結合するのをブロックします。
そのため、写真にはオレンジ色の境界線があります。 A 表示ブロック 要素が水平方向のスペース全体を占めていない場合、要素は自動的にその周囲にマージンを追加します。
きちんと詰め込まれたTシャツ
あなたのスーツケースのほとんどはおそらくあなたの旅行のためにあなたの残りの服でいっぱいです。簡単にするために、これをTシャツだけに減らします。折りたたみとローリングのどちらがより効率的かについては、インターネット上で大きな議論があります。私は折り畳みのような人です。
とにかく、ほとんどのアイテムに合うように、あなたはあなたのTシャツを並べて並べます。これはまさに何ですか display：inline-block のためのものです。これらの要素は、同じ行上で隣り合って配置することも、隣に配置することもできます。 display：inline 要素。
とは異なり display：inline 要素、 インラインブロック 要素が含まれているものに収まらない場合、要素は次の行に移動します div 他と一緒に インラインブロック 要素。 Tシャツを次の列にこぼすには、Tシャツを半分にカットし、残りの半分を使用して新しい列を開始する必要があります。 インラインブロック 要素が線に収まらない場合、要素を半分に分割することはできません。
隙間を埋める靴下
元のHTMLに戻ると、靴下が1つあることに気付くでしょう。 div> 8枚のTシャツの間。しかし、右側のスーツケースの水平方向のビューを見てください。靴下が1つある場合 div>、どのようにして中央の行を終了し、一番下の行を開始できますか？これが目的です display：inline!
アン 列をなして 要素が次の行の幅を超えると、次の行に波及します。 div （このようにそれはとは異なります インラインブロック または ブロック）。私たちの靴下以来 div 隙間に無造作に詰め込まれた靴下がいっぱいあるので、真ん中の列の右側の隙間を簡単に埋め始め、こぼれて下の列を始めることができます。
これを行うために靴下を半分に切る必要はありません。これが彼らがなることができる理由です 列をなして、Tシャツは インラインブロック。真ん中の列のTシャツが幅の60％しか占めていない場合、靴下は div> 行の残りのスペース全体を埋めるために上に移動します。
道中ご無事に
これがスーツケースの最後のCSSです。
.delicate {display：block;幅：60％; } .tshirt {display：inline-block;幅：20％; } .socks {display：inline; }
ディスプレイのさまざまな使用法を説明するためのいくつかの代替シナリオを次に示します。上のデリケーツが持っていた場合 display：inline-block、Tシャツのすぐ横に収まります。一部のTシャツはトップラインに移動し、残りはそれに応じて調整されます。襟付きシャツの左右に快適な緩衝材はありません。
各Tシャツが持っていた場合 表示ブロック、Tシャツの大規模なスタックが1行に1つずつあります。靴下があったら display：inline-block、それらはすべて、2つの行の間を流れるのではなく、一番下の行に配置されます。一部のTシャツは別の列に押し込まれ、4番目の行を形成します。 Tシャツの真ん中の列の右側に隙間があります。
ここで概説した方法では、利用可能なスペースを最大限に活用する、きちんと詰め込まれたスーツケースができあがります。
この記事はもともと ネットマガジン 289号; ここで購入!
