CSS 3列レイアウトの左右幅は固定、真ん中の要素はadaptive_html/css

CSS 3列レイアウトの左右幅は固定、真ん中の要素はadaptive_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:22:06

オリジナル

1196 人が閲覧しました

私は最近、左右の固定幅と適応型中央の 3 列レイアウトのいくつかの方法を学びました。不足している点があれば、ここで共有します。

私が最初に考えたのは float - フローティングレイアウトでした

float を使用し、最初に左右の要素をレンダリングし、それぞれを左右にフロートさせてから、中央の要素をレンダリングし、その左右のマージンをそれぞれ left と right 要素の幅。たとえば、次のコードは、必要な 3 列の効果を実現できます。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><body>    <div style="width:300px; float:left; background:#6FF">左侧的内容 固定宽度</div>    <div style="width:200px; float:right; background-color:#960">右侧的内容 固定宽度</div>    <div style="margin-left:300px;margin-right:200px; background-color:#9F3;">中间内容，自适应宽度</div></body></html>

ログイン後にコピー

次に、位置 - 位置決めについて考えました

位置決めメソッドを使用すると、最初に中央の要素をレンダリングする必要はなく、左側と右側の要素にそれぞれ、left:0;right: の位置決めを使用するだけです。 0; 中央の要素のマージンを設定します。左右のマージンは、左右の要素の幅です。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>.left{     width:200px;     height:500px;     position: absolute;     top:0;     left:0;     background:blue;}.center{    margin-left: 200px;    margin-right: 300px;    height:500px;    background-color: green;}.right{width:300px;height:500px;position: absolute;;top:0;right:0;background: blue;}    </style></head><body>    <div class="left">左边</div>    <div class="center">中间</div>    <div class="right">右边</div></body></html>

ログイン後にコピー

3 番目に、二重飛行翼レイアウトを使用します

二重飛行翼レイアウトの使用は他の方法とは異なり、最初に中央の要素をレンダリングし、次に両側の要素をレンダリングします (これはまったく逆であることに注意してください)。フロートレイアウト方法 Yo) では、まず 3 つの要素をすべて左側にフローティングに設定し、次に負のマージンを使用して、中央の要素の左側と右側にある左右の要素をカバーしてウイングを形成します。

すごいですね

ダブルフライングウィングレイアウトの最大の利点は互換性です - IE6 と互換性があることです

最後に、CSS3 flex レイアウト方法についてお話したいと思います

このアイデア方法はフレキシブルコンテナパッケージを3つの要素を用意し、このコンテナを横方向に配置(flex-flow:row)、左右の要素を固定幅、中央の要素をflex:1に設定します。 ;

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>.middle{    float: left;    width: 100%;    height: 50px;    background-color: #fff9ca;}.middle-wrap{    margin: 0 200px 0 150px;}.left{    float: left;    width: 150px;    height: 50px;    background-color: red;    margin-left: -100%;       /*负边距的作用就是让左边div盖在中间div上面*/}.right{    float: left;    width: 200px;    height: 50px;    background-color: yellow;    margin-left: -200px;    /*让右边的div覆盖在中间的div右边*/}    </style></head><body>    <div class="middle">        <div class="middle-wrap">middle</div>    </div>    <div class="left">left</div>    <div class="right">right</div></body></html>

ログイン後にコピー

しかし、フレックスレイアウトは互換性があると言わなければなりません、パフォーマンスはまだ完璧ではないため、個人的にはこのレイアウトを使用することはお勧めしません。

ねえ、上記は、固定の左右と適応的な中央の 3 列レイアウトを実装するために私が考えることができる方法です