CSSフロート付きルックブック

アバウト
たとえ我々が我々の日常生活にfloatsを使わないとしても.
学習フロートでは、ボックスの深さの理解、およびページの通常の流れの中での振る舞いを与える.

始めましょう!
このポストは、このレイアウトのルックブックのセクションについてです.

まず第一に、私がイメージを見るとき、私は紙の中で絵を描いて、容器がどこにあるか、そして、どのように組織されて、誰が包装しているかを想像しようとします.

ボックスによる構造
ここでは、6つの箱(子容器)を包んでいる1つのセクション(親容器)があります.

これは私のラフスケッチです

html

<section  class="lookbook">
    <div  class="box"></div>
    <div  class="box"></div>
    <div  class="box"></div>
    <div  class="box"></div>
    <div  class="box"></div>
    <div  class="box"></div>
</section>

CSS

.lookbook  {
width:  100%;
height:  80vh;
border:  1px  solid  black;
} 

.box  {
border:  1px  solid  red;
float:  left;
width:  30%;
height:  30vh;
margin:  10px;
}

これは以下のようになります.

免責事項
チュートリアルの目的のために純粋なので、このチュートリアルで意味値がないので、私はdiv要素を使用しています.あなたのウェブサイトを作成するとき、アクセシビリティは重要です、sections, articlesを使用してください.

私がこれまで使った値を説明すること.

.lookbook {
  width: 100%;
  height: 80vh;
  border: 1px solid black;
}

我々の容器の高さは、常に彼らの内容です.それで、私のセクションが高さを持つように、私は価値を与える必要があります.ここでは、画面全体に100vh(ビューポートの高さ)として使用することができますが、私は80として使用しているので、我々は全体のボックスを見ることができます.
これは唯一の方法ですか?いいえ、あなたはheight: 80vhのoverflow: autoに代わることができます.

.box {
  float: left;
  width: 30%;
  height: 100px;
  background: black;
  margin: 0.5%;
}

私はすべての箱を左に浮かせています、そして、私が各々の箱が30 %の幅を持つと言っている時から、値が100 %を越えるとき、次のボックスは次の列に行きます.それで、私は常に1列につき3箱を持ちます.
私は、ボックスの間でこのギャップ感を持つために、あらゆる面で各々の箱につきます.

箱を広げる
CSSがカスケードして一番上から下まで動作していることを知っているので、私たちはそれを利用し、それぞれのdivに新しいクラスを作ります.
このようにして、BOXのクラスの前に定義されている各ボックスの高さを上書きすることができます.

html

<section class="lookbook">
  <div class="box one"></div>
  <div class="box two"></div>
  <div class="box three"></div>
  <div class="box four"></div>
  <div class="box five"></div>
  <div class="box six"></div>
</section>

CSS

.lookbook {
  width: 100%;
  height: 80vh;
  border: 1px solid black;
}

.box {
  border: 1px solid red;
  float: left;
  width: 30%;
  height: 30vh;
  margin: 10px;
}

.one {
  height: 25vh;
}

.two {
  height: 50vh;
}

.three {
  height: 25vh;
}

.four {
  clear: both;
  height: 50vh;
  margin-top: -24vh;
}

.five {
  height: 25vh;
}

.six {
  height: 50vh;
  margin-top: -24vh;
}

結果は次のようになります


私が使用した新しい値を説明する.

.four {
  clear: both;
  height: 50vh;
  margin-top: -24vh;
}

私は、このクラスが最も純粋なものであると思います.これはすべてのCSSのフロートを使用してタッチを維持する私の方法です.
私はすでにボックスのクラスに固定されているすべての幅を持っているので.私はカスケード効果を使用して各ボックスの高さを上書きします.そして、私はマージントップを使用して、要素を引き上げて、それから私のセクションの容器の中に整列します.

画像の問題
今、あなたはあなたの構造を持って、あなたの箱の中でイメージを使うことに決めました、しかし、これは起こりました

html

<section class="lookbook">
  <div class="box one">
    <img src="https://via.placeholder.com/500" />
  </div>
  <div class="box two"></div>
  <div class="box three"></div>
  <div class="box four"></div>
  <div class="box five"></div>
  <div class="box six"></div>
</section>

これは完全に素晴らしいです、イメージはそれ自身の幅と高さを持っています、我々がすでに定義されているので、我々は彼らの親要素の中でよく振る舞うためにイメージに伝えなければなりません.
どうやってやるの?CSSは答えです.
あなたのimg elementのcssにこれを加えること.

CSS

img {
  width: 100%;
  height: 100%;
}

イメージ固定

html

<section class="lookbook">
  <div class="box one">
    <img src="https://via.placeholder.com/500" />
  </div>
  <div class="box two"><img src="https://via.placeholder.com/500" /></div>
  <div class="box three"><img src="https://via.placeholder.com/500" /></div>
  <div class="box four"><img src="https://via.placeholder.com/500" /></div>
  <div class="box five"><img src="https://via.placeholder.com/500" /></div>
  <div class="box six"><img src="https://via.placeholder.com/500" /></div>
</section>

CSS

.lookbook {
  width: 100%;
  height: 80vh;
  border: 1px solid black;
}

.box {
  border: 1px solid red;
  float: left;
  width: 30%;
  height: 30vh;
  margin: 10px;
}

.one {
  height: 25vh;
}

.two {
  height: 50vh;
}

.three {
  height: 25vh;
}

.four {
  clear: both;
  height: 50vh;
  margin-top: -24vh;
}

.five {
  height: 25vh;
}

.six {
  height: 50vh;
  margin-top: -24vh;
}

img {
  width: 100%;
  height: 100%;
}

現在、我々は我々のbordersを取り外すことができます.
そして、ここで私たちのルックブックは、CSSのフロートを使用して行われます.


未来のために
私は、CSSグリッドを使用してこの同じルックブックをする方法についての新しいポストをするつもりです.
私はこのチュートリアルでは、CSSのフロートについての詳細を理解するのに役立つことを願っています.

私の社会
もし100 devsブートキャンプに何か質問があったら、私に従ってください.
Twitter
ギタブ:https://github.com/mpfdev