CSS の両端の位置合わせを実現する 3 つの方法の分析例

黄舟

リリース： 2017-07-19 15:56:33

オリジナル

1829 人が閲覧しました

整列といえば、Word、PowerPoint、Outlook などのインターフェイスのナビゲーションでは、整列するためのボタン (分散整列) が一般的には使用されていません。左揃え、中央揃え、右揃えでページ上のテキストまたはモジュールを揃えます。

レスポンシブ Web デザインの出現以来、クロスアダプティブレイアウトが使用される割合がますます増えており、特にモバイル側では、両端の位置合わせがますます重要になってきています。それでは、CSS を使用して両端の位置を揃えるにはどうすればよいでしょうか? 多くの学生はテキストの位置を揃えるために text-align:justify を知っていると思いますが、これは今日説明する方法の 1 つです。さらに興味深い実装方法が 2 つあります。以下をお読みください~

次の図は、実装する必要があるデモで、幅がそれぞれ 320px、480px、640px のスクリーンショットを撮影しています。つまり、ブラウザウィンドウの幅に応じて、ボタンメニューの高さが調整されます。変更されず、幅は自動的に比例して調整されます。

目次 (20161028 に更新)

text-align:justify を使用します
use justify- content:space-between
列を使用する(複数列レイアウト)
モバイル端末でのテキスト配置の例(新規)

方法1:テキスト-align:justify

このソリューションを提供してくれたクラスメートに感謝しますこのソリューションを使用するとすべてのブラウザと互換性があります

が、実装はより複雑になり、ハッキングのような匂いがします

。 :justify 属性は完全に互換性があります。これを使用すると、モジュール間に [space/newline/tab] を追加できます。同様に、テキストの配置を実現するには、[space] を追加する必要があります。 /newline/tab] 単語間で機能する HTML:

box-pack は css3 属性に新しく追加され、display:box (古いバージョンの柔軟なレイアウト) に依存し、box-orient、box- の影響を受けます。 Pack はサブラベルの水平方向の配置を決定します。オプションの値は start | end | justify です。 box-pack:justify を使用して両端を揃えるのは非常に簡単で、必要なコードも少なくなります。将来に対応するために、display:flex (柔軟なレイアウトの新バージョン) も書かれています~

Webkit カーネルと winphone IE10 以降に基づいて Web アプリ開発を行っている場合は、すべてが簡単になります~

ボックスモデルのレイアウトについてはじめに、ここに「CSSボックスフレックス属性とフレキシブルボックスモデルの紹介」という記事があります。よく書かれており、誰にでもお勧めします~

HTML:

<p>模块内的元素之间为 分隔，只支持webkit和Gecko内核浏览器</p><br /><p class="demo"><a class="link" href="#none">10元</a> <a class="link" href="#none">20元</a> <a class="link" href="#none">30元</a> <a class="link" href="#none">50元</a></p><br /><p>模块内的元素之间为换行符</p><br /><p class="demo">
    <a class="link" href="#none">10元</a>
    <a class="link" href="#none">20元</a>
    <a class="link" href="#none">30元</a>
    <a class="link" href="#none">50元</a></p><br /><p>模块内的元素之间为空格符</p><br /><p class="demo"><a class="link" href="#none">10元</a> <a class="link" href="#none">20元</a> <a class="link" href="#none">30元</a> <a class="link" href="#none">50元</a></p><br /><p>模块内的元素之间为无分隔符，justify不起作用</p><br /><p class="demo"><a class="link" href="#none">选项1</a><a class="link" href="#none">选项2</a><a class="link" href="#none">选项3</a><a class="link" href="#none">选项4</a></p><br />

ログイン後にコピー

CSS:

{:;:;}{:;:;:;:;
}{:;
}{:;:;:;:;:;:;
}{:;:;:;:;:;:;:;:;:;:;:;:;:;:;
}

ログイン後にコピー

方法3: 列を使用する(複数列レイアウト)

columnはcss3のプロパティでもあり、複数列レイアウトを意味します。列を使用して両端の位置合わせを行うのは非常に簡単です。モジュールの数を設定するだけです。列の列数と同じにする必要があります。ただし、その自動調整方法はボックスを使用する場合とは少し異なります。たとえば、列間の距離をパーセンテージとして定義することはできません。幸いなことに、現在すべての高度なブラウザがサポートされており、IE10 のサポートも良好ですただし、IE9 以下はサポートされていません

winphone7 携帯電話との互換性を必要としない人向け。 )、列の強力な効果を最大限に活用できます~

HTML:

CSS:

<p class="demo">
    <a class="link" href="#none">10元</a>
    <a class="link" href="#none">20元</a>
    <a class="link" href="#none">30元</a>
    <a class="link" href="#none">50元</a></p>

ログイン後にコピー

。

以上がCSS の両端の位置合わせを実現する 3 つの方法の分析例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。