両端を揃える_html/css_WEB-ITnose

方法 1: text-align:justify を使用します

text-align:justify 属性は完全に互換性があるので、モジュール間に [スペース/改行/タブ] を追加することに注意する必要があります。同様に、テキストの配置を実現するには、単語の間に [スペース/改行/タブ] を追加する必要があります

/*

説明:

1. IE では、ブロック内の 2 行を実現する必要があります。終了位置揃えにはプライベート属性 text-align-last:justify を使用する必要があります。 text-align-last を有効にするには、まず text-align を justify として定義する必要があります

2.line-height:0 は冗長な空白を解決します。標準ブラウザコンテナの下部

*/

.content{

text-align:justify;

text-align-last:justify;

line-height:0;

height:44px;

}

/*

注:

モジュールで [改行] または [スペース文字] を使用すると、最後のモジュールには Webkit ブラウザーに余分な空白が表示されます。スペースをクリアするには font-size:0 を使用します。

*/

@media all and (-webkit-min-device-pixel-ratio:0){

.content{

font-size:0;

}

}

/*

説明:

1.text-align-last:justify は現在、IE でのみサポートされています。標準ブラウザは、同様の効果をシミュレートするために .demo:after 疑似クラスを使用する必要があります

2. Opera ブラウザは、vertical-align を追加する必要があります。底部にある余分な空白を完全に解く

block;ブロック要素

****************************************** **** ***************************************

方法 2: ボックスパックを使用する: justify

親コンテナ css:

.content{

display:-webkit-box;

display:-webkit-flex;

display:-ms-flexbox;

display:flex; box-pack:justify;

-webkit-justify-content:space-between;

-ms-flex-pack:justify;

justify-content:space-between;

}

そして、サブクラスは次のようにする必要がありますブロック要素

********************************************* *****************************************

方法 3: 使用するcolumn (詳細な列レイアウト)

/*

説明:

1. column-count はオブジェクトの列数を定義します

2. column-gap はオブジェクト内の列間の間隔を定義します

*/

親クラスコンテナ css :

.content {

-webkit-column-count: 2;

-moz-column-count: 4;

column-count: 4;

-webkit-column-gap: 20px ;

- moz-column-gap: 20px;

column-gap: 20px;

}

、サブクラスはブロック要素である必要があります