ホームページ > 記事 > ウェブフロントエンド > CSSレイアウト 文字レイアウト_html/css_WEB-ITnose
CSSレイアウト 文字レイアウト_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:38:401065ブラウズ
最近、クラスメイトが面接でピンキャラの配置について質問されました。確かにこのレイアウトはダサいので使ってはいけないと思いますが、質問があったのでやはりピンキャラのレイアウトを自分で書いてみました。実はとても簡単です。
最初に効果を見てください:
最初のタイプ:
2 番目のタイプ:
最初のタイプ:
実際、実装方法は非常に簡単で、基本的な考え方:
(1 ) 3 つのブロックの高さと幅が決定されます ;
(2) 上のブロックは margin: 0 auto を使用します
(3) 下の 2 つのブロックは折り返しなしで float または inline-block を使用します。 ) 中央になるようにマージンを使って位置を調整します。
インラインメソッドのコードは次のとおりです:
<!DOCTYPE html><html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <style> *{ margin: 0; border: 0; } .d1, .d2, .d3{ height: 100px; width: 100px; background-color: #FF0000; border: solid 1px #000000; } .d1{ margin: 0 auto; } .d3{ display: inline-block; margin-left: -200px; } .d2{ display: inline-block; margin-left: 50%; } </style> <body> <div class="d1">上</div><!-- --><div class="d2">右</div><!-- --><div class="d3">左</div> </body></html> ここではまず margin-left: 50% を使用し、次の 2 つのブロックの左側が中央に来るようにします。次に、右下隅の margin-left を使用します。値は幅の 2 倍の負の値になります。それを左下隅に移動するだけです。したがって、2 番目の div は右下にあり、3 番目の div は左下にあり、変更する必要があります。
inline-block を使用すると小さな隙間が発生しますが、これを解決するには N 個のメソッドを使用します。
float メソッド:
<!DOCTYPE html><html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <style> *{ margin: 0; border: 0; } .d1, .d2, .d3{ height: 100px; width: 100px; background-color: #FF0000; border: solid 1px #000000; } .d1{ margin: 0 auto; } .d3{ float: left; margin-left: -200px; } .d2{ float: left; margin-left: 50%; } </style> <body> <div class="d1">上</div> <div class="d2">右</div> <div class="d3">左</div> </body></html> は inline-block メソッドに似ているため、詳細は説明しません。
さらにシンプルな全画面ピン レイアウトもあります。基本的な考え方は、上の div が 100% 広く、下の 2 つの div がそれぞれ 50% 広くなり、それを防ぐために float または inline を使用します。ラッピングから。
メソッドはここに掲載されています:
<!DOCTYPE html><html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <style> *{ margin: 0; border: 0; } .d1, .d2, .d3{ height: 300px; } .d1{ width: 100%; height: 300px; background-color: #FF0000; } .d3{ float: left; width: 50%; background-color: #0099FF; } .d2{ float: left; width: 50%; background-color: #4eff00; } </style> <body> <div class="d1">上</div> <div class="d2">右</div> <div class="d3">左</div> </body></html>