6つのCSS 3列レイアウト方法の例-jsチュートリアル-php.cn

6つのCSS 3列レイアウト方法の例

小云云

リリース： 2018-02-12 16:11:17

オリジナル

1686 人が閲覧しました

この記事では、主に CSS の 3 列のレイアウト方法の 6 つの例を紹介します。彼らはどういう意味ですか？ええと...頭をかいてください。gif、本質に戻って定義を見てみましょう。

Positioning

position には、静的、相対、絶対、固定、スティッキー、継承の 6 つの属性値があります。

static (デフォルト): 要素ボックスは通常通り生成されます。ブロックレベルの要素はドキュメントフローの一部として長方形のボックスを作成し、インライン要素は親要素内に配置される 1 つ以上の行ボックスを作成します。
relative: 要素ボックスは、通常のドキュメントフロー内の以前の位置に対してオフセットされており、元の位置はまだ占有されています。オフセットが発生すると、他の要素が隠れてしまう可能性があります。
absolute: 要素ボックスはドキュメントの位置を占めなくなり、包含ブロックに対して相対的にオフセットされます (いわゆる包含ブロックは、最も近い外側要素の位置が静的ではない要素です)。
修正: 要素ボックスはドキュメントフローの位置を占めなくなり、ビューポートを基準にして配置されます。
sticky: CSS3 の新しい属性値である Sticky Positioning は、相対位置と固定位置の混合に相当します。最初は、元の位置に対してオフセットされた相対位置として扱われますが、特定のしきい値を超えると、ビューポートに対して相対的に配置された固定位置として扱われます。

3列レイアウト

3列レイアウト、1列幅は適応可能で、PC側で最も一般的に使用されるものの1つで、3列レイアウトが実現され、他のルーチンは同じです。

方法 1: フローティングレイアウト

短所: HTML 構造が正しくない場合、格納領域の幅が左右のボックスの合計よりも小さい場合、右側の境界線が縮小されます

<style>
    .tree-columns-layout.float .left {
        float: left;
        width: 300px;
        background-color: #a00;
    }

    .tree-columns-layout.float .right {
        float: right;
        width: 300px;
        background-color: #0aa;
    }

    .tree-columns-layout.float .center {
        /* left: 300px;
        right: 300px; */
        margin: 0 300px;
        background-color: #aa0;
        overflow: auto;
    }
</style>
<section class="tree-columns-layout float">
    <article class="left">
        <h1>我是浮动布局左框</h1>
    </article>
    <article class="right">
        <h1>我是浮动布局右框</h1>            
    </article>
    <article class="center">
        <h1>我是浮动布局中间框</h1>            
    </article>
</section>

ログイン後にコピー

方法 2: 位置決めレイアウト

短所: 親は非静的配置である必要があります。そうでない場合、左右のフレームが簡単にオフセットされます

<style>
    .tree-columns-layout.position {
        position: relative;
    }

    .tree-columns-layout.position .left {
        position: absolute;
        left: 0;
        top: 0;
        width: 300px;
        background-color: #a00;
    }

    .tree-columns-layout.position .right {
        position: absolute;
        right: 0;
        top: 0;
        width: 300px;
        background-color: #0aa;
    }

    .tree-columns-layout.position .center {
        margin: 0 300px;
        background-color: #aa0;
        overflow: auto;
    }
</style>
<section class="tree-columns-layout position">
    <article class="left">
        <h1>我是浮动定位左框</h1>
    </article>
    <article class="center">
        <h1>我是浮动定位中间框</h1>
    </article>
    <article class="right">
        <h1>我是浮动定位右框</h1>
    </article>        
</section>

ログイン後にコピー

方法 3: テーブルレイアウト

短所: 欠点はありませんが、テーブルは心配です

<style>
    .tree-columns-layout.table {
        display: table;
        width: 100%;
    }

    .tree-columns-layout.table > article {
        display: table-cell;
    }

    .tree-columns-layout.table .left {            
        width: 300px;
        background-color: #a00;
    }

    .tree-columns-layout.table .center {
        background-color: #aa0;
    }

    .tree-columns-layout.table .right {
        width: 300px;
        background-color: #0aa;
    }   
    
</style>
<section class="tree-columns-layout table">
    <article class="left">
        <h1>我是表格布局左框</h1>
    </article>
    <article class="center">
        <h1>我是表格布局中间框</h1>
    </article>
    <article class="right">
        <h1>我是表格布局右框</h1>
    </article>
</section>

ログイン後にコピー

方法 4:フレックスエラスティックレイアウト

欠点:互換性

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

欠点:Firefox 52、Safari 10.1、Chrome 57、Opera 44との互換性

<style>
    .tree-columns-layout.flex {
        display: flex;
    }    
    
    .tree-columns-layout.flex .left {
        width: 300px;
        flex-shrink: 0; /* 不缩小 */
        background-color: #a00;
    }

    .tree-columns-layout.flex .center {
        flex-grow: 1; /* 增大 */
        background-color: #aa0;
    }

    .tree-columns-layout.flex .right {
        flex-shrink: 0; /* 不缩小 */
        width: 300px;
        background-color: #0aa;
    }
</style>
<section class="tree-columns-layout flex">
    <article class="left">
        <h1>我是flex弹性布局左框</h1>
    </article>
    <article class="center">
        <h1>我是flex弹性布局中间框</h1>
    </article>
    <article class="right">
        <h1>我是flex弹性布局右框</h1>
    </article>
</section>

ログイン後にコピー

方法6:聖杯レイアウト

欠点:余分なタグのレイヤー、HTML の順序が間違っており、レイアウトボックスのマージン属性を占めています

<style>
    .tree-columns-layout.grid {
        display: grid;
        grid-template-columns: 300px 1fr 300px;
    }

    .tree-columns-layout.grid .left {
        background-color: #a00;
    }

    .tree-columns-layout.grid .center {
        background-color: #aa0;
    }

    .tree-columns-layout.grid .right {
        background-color: #0aa;
    }
</style>
<section class="tree-columns-layout grid">
    <article class="left">
        <h1>我是grid栅格布局左框</h1>
    </article>
    <article class="center">
        <h1>我是grid栅格布局中间框</h1>
    </article>
    <article class="right">
        <h1>我是grid栅格布局右框</h1>
    </article>
</section>

ログイン後にコピー

達成効果:

6つのCSS 3列レイアウト方法の例