CSS を使用して複数の方法で等幅レイアウトを実装するサンプルコード

CSS を使用して複数の方法で等幅レイアウトを実装するサンプルコード

この記事で説明する等幅レイアウトでは、純粋な CSS を使用して、要素の幅を手動で設定することなく、各要素の幅を同じにする効果を実現します。

1. テーブルセルを使用して実装する(IE8と互換性あり)

<スタイル>
    本文、div{
        マージン: 0;
        パディング: 0;
    }
    .テーブルレイアウト{
        display: table;/*親要素はtableに設定する必要があります*/
        table-layout: fixed;/*この属性は必ず存在する必要があります。存在しない場合、効果は得られません*/
        幅: 50%;
        マージン: 20px 自動;
    }
    .テーブルセルレイアウト{
        display: table-cell;/*子要素はtable-cellに設定する必要があります*/
        高さ: 40px;
        境界線: 1px 実線 #666;
        左境界線: なし;
    }
    .table-cell-layout:最初の子{
        左境界線: 1px 実線 #666;
    }
</スタイル>

<本文>
    <ul class="テーブルレイアウト">
        <li class="table-cell-layout">li1</li>
        <li class="table-cell-layout">li2</li>
        <li class="table-cell-layout">li3</li>
        <li class="table-cell-layout">li4</li>
        <li class="table-cell-layout">li5</li>
    </ul>
</本文>

2. フレックスレイアウトを使用して

<スタイル>
    本文、div{
        マージン: 0;
        パディング: 0;
    }
    .flex-レイアウト{
        ディスプレイ: フレックス;
        幅: 50%;
        マージン: 20px 自動;
    }
    .flex-item{
        フレックス: 1;
        高さ: 40px;
        境界線: 1px 実線 #666;
        左境界線: なし;
    }
    .flex-item:最初の子{
        左境界線: 1px 実線 #666;
    }
</スタイル>

<本文>
    <ul class="flex-layout">
        <li class="flex-item">li1</li>
        <li class="flex-item">li2</li>
        <li class="flex-item">li3</li>
        <li class="flex-item">li4</li>
        <li class="flex-item">li5</li>
    </ul>
</本文>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<:  MySQLテーブルをコピーする方法

>>:  Docker は 2003 年の問題を解決するために MySQL リモート接続を導入しました

推薦する

Docker を使用して pypi プライベート リポジトリを構築する方法

1. 建設1. htpasswd.txtファイルを準備するファイルには、パッケージを倉庫にアップロー...

CentOS7環境にMySQL5.5データベースをインストールする

目次1. 現在のシステムにMySQLがインストールされているかどうかを確認する2. インストールされ...

テーブルを開く際のMySQLスレッドの問題の解決方法

問題の説明最近、MySQL5.6.21サーバーがありました。アプリケーションがリリースされた後、同時...

ウェブページ内のFlash SWFファイルを変更する方法

これは多くの人が遭遇した問題だと思います。実際、Web ページから FLASH をダウンロードして修...

Windows Server2014 にセキュリティを適用して MySQL をインストールする際のエラーに対する完璧な解決策

理由はインストール後にきちんとアンインストールされなかったためです。この問題を解決するには、次の点に...

JavaScript を使って簡単な計算機を書く

効果は以下のとおりです。参考プログラム: <!DOCTYPE html> <htm...

MySQL のクエリパフォーマンスに対する制限の影響

I. はじめにまず、MySQL のバージョンについて説明します。 mysql> バージョンを選...

Nginx10m+の高並列カーネル最適化に関する簡単な説明

高い同時実行性とは何ですか?デフォルトの Linux カーネル パラメータは、最も一般的なシナリオ向...

CSS3 の新しいレイアウト: flex の詳細な説明

Flexの基本概念フレックス レイアウト (フレックスはフレキシブル ボックスの略)、エラスティック...

Nginx サーバーで URL リンクを設定する方法

LNMPのようなアーキテクチャを持つウェブサイトは、一般的にPHPフレームワークに基づいて開発されて...

Vue3を使用してjsで呼び出せるコンポーネントを実装する

目次序文1. 従来のVueコンポーネント1. メインコンポーネントコード: 2. 使用方法3. 成果...

MySQLの高性能最適化スキルの概要

データベースコマンド仕様すべてのデータベース オブジェクト名には小文字を使用し、アンダースコアで区切...

Dockerコンテナを介してランプアーキテクチャを構築するプロセス

目次1. Centosイメージを取得する2. nginxイメージをビルドする3. MySQLイメージ...

MySQLの累積集計原理と使用例の分析

この記事では、例を使用して、MySQL 累積集計の原理と使用方法を説明します。ご参考までに、詳細は以...

ReactプロジェクトにSCSSを導入する方法

まず依存関係をダウンロードします yarn sass-loader ノード sass を追加します次...