cssを使って左側(右側)の幅を固定にする方法と右側(左側)の幅を適応させる方法の紹介

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

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

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

1. 左側のレイアウトは固定で、右側のレイアウトは適応型です

*{ margin:0 padding:0}

width : 100% }

& lt; p クラス = "全体" & gt;

& lt; 左" & gt; 固定 300px & lt 左側 /p & gt; & lt; p class = "Right" & gt; 右適応 & lt;/p & gt; & lt;/p & gt ; 幅、右側の左余白からの距離 == 左レイヤーの幅

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

方法 2: 左側絶対位置、右側のコードは変更されていないか、右側の左マージンの距離Side == 左レイヤーの幅;

css code:
.left{ position: left:0; width:300px; background:red}

.right { margin-left:300px; background:green; }

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

cssコード：

.left{position:absolute; left:0; :300ピクセル; 背景:赤}

.right{position:Absolute;

2. 左側のレイアウトは固定されず、右側のレイアウトは固定されます -----方法は同じです。ポジションを変更します。p＆gt; lt;/p＆gt;左側の left float、right margin == 右レイヤーの幅の負の値 (左オープンなので、右側からの距離が適切です)

、 右側のものはフローティング幅と固定幅です

.left{ float:left; width:100%; margin-right:-300px; .right{ float : 右; 幅: 300px; 背景: 青;}
方法 2、 左側と右側の両方で絶対位置を使用し、親の相対定義を使用します (影響しません。相対定義を追加することをお勧めします)重複を避けてください)

: 緑;}

方法 3、

フロートを消す方法を一気に解説

1.

フローティングレイヤーの下 レイヤーを定義する

">

.clear{ clear:both}

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

.father::after, 。父親 :

: BeFore b {Clear: Both; Content: "" "; display: Table;} & lt; P Class = 'FATHER' & GT;

& LT; P Class ="son-flotleft">

3. 親要素 は overflow を設定します非表示または自動に、高さを固定することもできます - 推奨されません

.お父さん オーバーフロー : 非表示; 幅: 100% } / /オーバーフロー:自動; :300px;
書かれた説明は非常に少なく、どれだけアイデアを述べても、それはレットではありません。直接コードは実用的であり、使用すると意味が理解できるようになります。頑張ってください。 。

追加 -- 横画面は禁止です

縦画面の方がブラウジング効果が優れています!

.orientation-alert{背景: rgba(0,0,0,.85);位置: 固定;左: 0;
上
: 0 ;
高さ: 100%;
幅: 100%;

z-index
: 1000000;
色: #FFF;
表示: なし;}.orientation-alert p{
位置: 絶対;
幅: 100%;
top: 50%;font-size
: 20px;

line-height
: 30px;

margin-top
: -15px;
text-align: center;
}@メディア画面と (方向 : 横){.orientation-alert{
表示: ブロック; }}
@メディア画面と (方向 : 縦){.orientation-alert{ 表示: なし;
}
}

以上がcssを使って左側(右側)の幅を固定にする方法と右側(左側)の幅を適応させる方法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。