CSS は左側 (右側) に固定幅を実装し、右側 (左側) に適応幅を実装します --- クリアフローティング-CSSチュートリアル-php.cn

CSS は左側 (右側) に固定幅を実装し、右側 (左側) に適応幅を実装します --- クリアフローティング

高洛峰

リリース： 2016-10-15 09:17:38

オリジナル

1342 人が閲覧しました

昔の話ですが、CSSがレイアウトに合わせて固定されていないのは、面接でも日常業務でもよく使われているので、今日はそれを取り出してお話します。それについては、準備をするためだけでなく、保存することを忘れることは、誰もが知っていることを知っていても、しっかりとした基礎を築くために、依然として暗記する必要があります。

言いたいことが多すぎますが、コードを見れば一目で理解できます。単純だと無視されるかも知れませんが、私は何かを書くのが好きです。。。。。。新人は基礎からしっかり勉強しなければなりません。

新しい方法があれば、ぜひ追加してください。！

1. 左側が固定レイアウト、右側がアダプティブレイアウト

   <div class="whole">
        <p>自适应测试</p>
           <div class="left">固定左侧 300px</div>
        <div class="right">右侧自适应</div>
 </div>

ログイン後にコピー

方法 1: float を使用して左側に固定幅を与えます。左側のマージンからの距離 == 左側の幅になります。レイヤー

CSS コード:

　　　　.left{ float:left;width:300px; background:red}
　　　　.right{ margin-left:300px; background:green; width:100%}

ログイン後にコピー

方法 2: 右側のコードは左マージンからの距離 == 左側のレイヤーの幅に変更されません。コード:

　　　　.left{ position: absolute; left:0; width:300px; background:red}
　　　　.right{ margin-left:300px; background:green; width:100%}

ログイン後にコピー

方法3(個人的な好み): 左側と右側の両方に絶対配置を使用します。絶対、親の相対定義(影響しません。重複を避けるために相対定義を追加することをお勧めします)

cssコード:

　　　　.left{ position: absolute; left:0; width:300px; background:red}
　　　　.right{ position: absolute; left:300px; background:green; width:100%}

ログイン後にコピー

2. 左側のレイアウトは固定されません、右側のレイアウトは固定です ----- 方法は同じです、位置を変えるだけです

   <div class="whole">
        <p>自适应测试</p>
           <div class="left">左侧自适应</div>
        <div class="right">右侧宽度固定</div>
  </div>

ログイン後にコピー

方法 1. 左側に left float を使用し、右マージン == 右レイヤーの幅の負の値 (左に広げているため、右レイヤーからの距離は適切です)、右側は浮動小数点と固定幅です

      .left{ float:left; width:100%; margin-right:-300px; background: red; }
　　.right{ float: right; width: 300px;background: blue;}

ログイン後にコピー

方法 2 、左側と右側の両方で絶対位置を使用し、親の相対定義を使用します (影響しません。重複を避けるために相対定義を追加することをお勧めします)

       .left{ position: absolute; left:0;  width: 100%;  background: red;}
　　.right{ position: absolute;  left:200px; width:200px; background: green;}

ログイン後にコピー

方法 3、

フロートをクリアする方法は、次のとおりです。一気に説明すると、

1 、フローティングレイヤーの下に別のレイヤーを定義します

.clear{ clear:both}

2. 疑似クラスメソッド: after (親クラスのレイアウトレイヤーで使用) -一般的に使用される

         .father::after,.father::before{ clear: both; content: ""; display: table;}
  　　 <div class=&#39;father&#39;>
       　　 <div class="son-flotleft"></div>
　　　　　<div class="son-flotrgt"></div>
  　　 </div>

ログイン後にコピー

3. 親要素設定のオーバーフロー非表示または自動の場合、高さを固定することも可能です - 推奨されません

        .father{overflow:hidden; width: 100%; }　  //overflow:auto; height:300px;

ログイン後にコピー