高さが既知で、左右の幅が固定された 5 つの方法で 3 列レイアウトを実装します。-CSSチュートリアル-php.cn

よく言われるように、良い記憶は悪い文章ほど優れていません。これは、コードを書く場合にも当てはまります。読んだ内容は長く心に残りません。そこで、長い間作業した後、最初に共有するために、次により良い要約のために、以前に記録した知識をゆっくりとアップロードしました。さて、さっそく本題に入りましょう。

最初の方法: float

    
  
  浮动解决方案

ログイン後にコピー

最初の解決策は基本的に難しくないので、日常生活でよく使用する必要があります。

2 番目の方法: 絶対位置決め

 


 
 
 

 
 
 

 
 绝对定位方案2

ログイン後にコピー

2 番目の方法も効果を達成するのが簡単です。

3番目の方法: flexbox

flex方案

ログイン後にコピー

4番目の方法: テーブルレイアウト

<style>.table{ margin-top:10px; width:100%; display:table; height:100px; } .table>p{ display:table-cell; } .table .left{ width:300px; background:red; } .table .center{ background:blue; } .table .right{ width:300px; background:yellow; }style>

<body><p class="table"> <p class="left"> p> <p class="center"> table方案 p> <p class="right"> p>p>body>

ログイン後にコピー

テーブルソリューションも実装されていますが、今ではテーブルレイアウトを使用することはほとんどありません。

5 番目の方法: グリッドレイアウトグリッド

grid方案

ログイン後にコピー

CSS3 のグリッドレイアウト方法も、ブートストラップのラスターレイアウトに似ており、どちらも占有されるブロックを分割します。要素によって。

質問はまだ終わっていません。議論を続けましょう。 5 つのソリューションのうちどれが優れていますか?著者は、テクノロジーは良い悪いではなく、すべてはそれをどこで使用するかによって決まると常に信じてきました。

個人的に考える 5 つの方法の長所と短所:

1. フローティング: 優れた互換性互換性に対する明確な要件がある場合は、フローティングを使用することでニーズを満たすことができますが、周囲の要素との関係を適切に処理する必要があります。注意してください。フローティングはページレイアウトを混乱させるなどの問題を引き起こす可能性がありますが、フローティングによって引き起こされる副作用を解決する方法はたくさんありますが、ここでは説明しません。

2. 絶対配置: シンプルかつ直接的ですが、親要素が通常のドキュメントフローから切り離され、子要素も切り離されます。

3.flex: 現時点では完璧であるように見えますが、現在では、もう少し完璧なテクノロジとの互換性の問題が多かれ少なかれありますが、これと同じスタイルは IE8 ではサポートされていません。 (IE!)

4. テーブルレイアウト: テーブルレイアウトに大きな問題はありませんが、テーブルレイアウト内の 3 つのセルの高さを同時に調整する場合は非常に面倒になります。一緒に変更することになりますが、レイアウトは私たちが行います。

5. グリッドレイアウト: コードは美しく簡潔ですが、互換性の問題がまだあります。しかし、未来は明るいです！

以上が高さが既知で、左右の幅が固定された 5 つの方法で 3 列レイアウトを実装します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。