2

Singularity を使用していくつかの典型的なレイアウトの例を作成しようとしてきましたが、グリッドスパンとフロートについて質問があります。

サンプルの scss スタイルシートと html レイアウトを作成しました。Sassmeister の完全な例を次に示します。

http://sassmeister.com/gist/a7ca98b7520b12bd6241

私の質問は、内容を含む div<div id="content">が必要かどうかです。divを「引き下げ」、フッターをコンテンツセクションの下に置いて脇に置くために、clearfix mixinで使用する必要があります。

周囲の clearfix div を使用せずに、Singularity でこのレイアウトを実現する別の方法はありますか? フロートを使用しないか、このセクションを自動的にクリアするメイン セクションのグリッド スパンのオプションはありますか?

4

1 に答える 1

9

問題を理解するには、フロートとクリアリングがどのように機能するかを学ぶ必要があります。

0.

要素をフロートすると、フローから削除されます。コンテナーの高さを計算するときに、垂直方向の高さはカウントされません。

1.

フロートの使用目的は、長いテキスト シートに画像を追加することです。水に沈められたオブジェクトが水面の高さを増加させるのと同じように、テキストはフローティング画像の周りを回り込み、全体の高さを増加させ、コンテナを垂直に引き伸ばします。

前：

ここに画像の説明を入力

後：

ここに画像の説明を入力

2.

フローティング画像がテキストの下部に非常に近い位置にある場合、ちょうど氷山が水から上部を露出させているように、コンテナーの下部から下部が飛び出します。

ここに画像の説明を入力

3.

ここで、テキストが段落で構成され、各段落がタイトルで始まると想像してください。段落の一番下に画像が浮いていると、画像が次の段落に伸びて、次の段落のタイトルが脇に押し出されます。

ここに画像の説明を入力

4.

これが発生したくない場合は、段落タイトルにクリアを適用します。

h2 { clear: both; }

これは基本的にタイトルを伝えます。フローティング画像があなたを押しのけるのではなく、代わりに押し下げさせてください.

ここに画像の説明を入力

5.

しかし、Web ページは書式設定されたテキスト以上のものになり、HTML/CSS はレイアウトを書式設定する手段を提供しませんでした。そこで、レイアウトにフロートを使い始めました。それは醜く、壁紙を使って服を縫うようなものですが、これ以上の選択肢はありません (Flexbox が実用化されるまでは)。

コンテナー内のすべてのコンテンツをフロートするとどうなりますか? フローは残らず、コンテナーを垂直方向に引き伸ばすテキストはなく、高さはゼロになります (ボーダーとパディングに加えて):

ここに画像の説明を入力

6.

コンテナーの高さを元に戻す (フローティング コンテンツをラップする) には、コンテナーにclearfixを適用する必要があることは既にご存じでしょう。しかし、clearfix とは実際にはどのようなものなのでしょうか?

コンテナーに clearfix を適用する場合:after、CSS で を使用して、コンテナー内に追加の要素を作成します。次に、小さなマザー fcuker にクリアリングを適用します。

.container:after {
  content: '';
  display: block;
  clear: both;
}

ここに画像の説明を入力

7。

質問に戻りましょう。clearfix を使用する代わりに何ができますか?

あなたはおそらくすでに推測しているでしょう。

フロート要素の下にコンテンツがある場合は、フロート要素のclear: both下の次の要素に適用するだけです! #4で段落のタイトルを付けたのと同じように。

あなたの場合：

footer { clear: both; }

そして、ここにデモがあります：http://sassmeister.com/gist/df8af8a3c7f8d3df2796

于 2014-06-14T11:31:55.230 に答える