レイアウトの作成

13132 ワード
inline block レイアウト float CSS html テキストリンク

すべての要素をボックスに分けて考える。

  • すべての要素を含む大きなボックスを作成します.
  • 伝統的にクラス名はwrap、容器
    • <div>
  <div class="left-box"></div>
  <div class="right-box"></div>
</div>
  • divはblockタグなので、行ごとにタグが表示されますが、移動しますか?
  • メソッド:float : leftを使用します.
    • .left-box {
  width : 100px; 
  height : 100px;
  float : left;
}
.right-box {
  width : 100px; 
  height : 100px;
  float : left;
}
  • 2つの箱をそれぞれ左に揃えます.
  • floatプロパティを使用して横ソートする場合は、大きなdivボックスを作成し、幅を指定することが望ましいことに注意してください.(モバイルデバイスをオーバーフローさせない)
  • ただし、floatを使用すると要素がオフセットされ、その後のHTML要素は配置されません.

    • floatを使用すると、常にclearプロパティが必要になります。

    <div>
  <div class="left-box"></div>
  <div class="right-box"></div>
  <div class="footer"></div>
</div>
  • 上記のように、フッターの追加は表示されません.
  • floatの特徴:すべての要素を包む箱で使用すると、float箱がバタンと浮かび上がる.(非占有スペース)
    • .footer {
    width: 100%;
    height: 50px;
    background-color: orange;
    clear: both;
}
  • clear : both;.→その後float属性を中断します.
  • floatを使用する場合は、常に後ろに置くことを忘れないでください!

    • inline-blockを使用してレイアウトを作成します。


    display : block

  • 1行がすべてを占めています.したがって、行ごとにdiv boxが表示されます.

    • display : inline-block

  • ラベルを(インラインラベルのように)横に置くことができます.ただし、ラベル間にスペースがある場合は、ステータスがblockの場合と同様に表示できます.
  • テキストに敏感で、スペースキーとEnterキーをレンダリングできます.
    • <div class="container">
    <div class='header'></div>
    <div class="left"></div><div class="right"></div>
</div>
    .left {
    width: 20%;
    height: 500px;
    background-color: orange;
    display: inline-block;
}

.right {
    width: 80%;
    height: 500px;
    background-color: gold;
    display: inline-block;
}

    必ずEnterに参加するなら?


    空白を消す方法1。アノテーションを使用したシンボルの操作

    <div>
    <div class="left-box"></div><!--
 --><div class="right-box"></div>
</div>
  • 行が一致しないと、コードが汚れて見える可能性があります.

    • 空白を消す方法2。親フォントサイズを0にする

    <div style="font-size : 0;">
    <div class="left-box"></div>
    <div class="right-box"></div>
</div>
  • left-boxおよびright-boxは、フォントサイズを正常に戻すにはCSS定義が必要です.
  • HTMLはユーザーの選択に応じてCSSを汚します.
    • つのXYZ座標を整列する方法
    Django | Admin