マルチカラム・サイド・バイ・サイド・マルチブロック・サイド・バイ・サイドを実現するcss header_html/css_WEB-ITnose

今日仕事で問題が発生しました: 表示コンテンツが配置される 3 つの div ブロックがあり、中央に隙間があり、両側の上部に幅ができます。画面サイズに合わせて調整します。
最初に思いついたのは従来の 3 列レイアウトでしたが、従来の 3 列レイアウトには固定幅と適応幅があり、インターネットで長時間検索しましたが、結果が見つかりませんでした。だから自分で考えてください。

思いつく最初の方法:

最初の方法は、両側でフロートを使用し、マージンを中央に配置することを計画しています。コードは次のとおりです:
css:

    .wrap{height:300px;width:95%;margin: 100px auto;}    .left{float:left;width:32%;height:100px;background-color: #235255}    .right{float:right;width:32%;height:100px;background-color: #374737}    .middle{width:32%;margin:0 auto;height:100px;background-color: #563958}

html:

    <div class="wrap">        <div class="left"></div>        <div class="middle"></div>        <div class="right"></div>    </div>

結果は次のようになります:

チェックした後、解決策は次のとおりです。右前に進みます。試してみたらうまくいきました。

 html:    <div class="wrap">        <div class="right"></div>        <div class="left"></div>        <div class="middle"></div>             </div>    

しかし考えてみてください、この問題には多くの不都合があります。まず、html の読み込み順序が崩れる可能性があり、間隔が固定されず、float を追加すると副作用が生じる可能性があります。
次に、2番目のオプションを検討します。私は同僚に尋ねたところ、float の代わりに inline-block を使用できると言いました。これは私に大きなインスピレーションを与えてくれました。帰ってきたら試してみました。

2 番目の考え方

このメソッドは、3 つのブロックすべてを display:inline-block に設定し、inline 要素の特性を使用してそれらを 1 行に配置し、次に box- sizing 属性は border-box に設定されます。
このメソッドにはいくつかの利点があります:
1. float の副作用はありません
2. 3 列でも 30 列でも、そのまま実行してください
コードは次のとおりです:
> css :

    .g-bd{width: 95%;height: 300px;padding-top:20px;background-color: #bbbbbb;margin: 0 auto;}    .in-bl{display: inline-block;}    .f{width: 33.333%;height: 100px;background-color: #ab1256;}    .s{width: 33.333%;height: 100px;}    .t{width: 33.333%;height: 100px;background-color:#192873;}

html:

    <div class="g-bd">    <div class="f in-bl">            </div>    <div class="s in-bl">    </div>    <div class="t in-bl">    </div>    </div>

結果は期待どおりではありません。間に隙間がなく、コンテナが埋められ、改行がないことが期待されます。結果、迷わず転職してしまった彼らの間には、あってはならない溝が生じてしまったのです。
理由も非常に簡単で、inlineで要素間の改行はスペースとして認識されてしまいます(泣)。
マスター Xinxu の詳細な説明は次のとおりです。Zhang Xinxu のインライン ブロックの理解は素晴らしいです。これはデモです。スペースを削除する最も簡単な方法を使用してください。
さらに別の問題があります。マージン/パディングを通じてそれらの間に間隔を設定することはできません。方法は次のとおりです: 各ボックスの中にボックスをネストし、背景を内側に設定し、幅を 100% より小さく設定し、調整可能なギャップができるように margin: auto で位置を調整します。 。このメソッドはネストを追加し、境界ボックスを設定するための副作用がいくつかあります。仕事に就くときに、ニーズに基づいて選択してください。