IE8 や IE9 では1カラムになるけれども、簡単に2カラムとか3カラムに変更できる方法

記事「記事内に高さの同じ枠つきの欄を作成する –display: table を使う方法 -(改)」等において、記事を複数のカラムにする方法について検討しましたが、カラムの高さを揃えたり、複数のカラムが解かれて、1カラムになるのはまずい、ということでなければ、「column-count」という CSS を使えば、簡単に複数のカラムにできるようです。

たとえば、Wikipedia の出典の部分で使われています。

sadgaga
イチロー – Wikipedia

上のページの場合、以下のような CSS を使っており、

afgvsgsadf

W3Schoolsによると、以下のような記述で OK のようです。

dgdafgfds
CSS3 column-count property

ie9 より下のバージョンだと適用されないようで、

The column-count property is supported in Internet Explorer 10 and Opera.

Firefox supports an alternative, the -moz-column-count property.

Safari and Chrome support an alternative, the -webkit-column-count property.

Note: The column-count property is not supported in Internet Explorer 9 and earlier versions.

引用先:CSS3 column-count property

例えば、さきほどのページを ie9 で閲覧した場合、以下のように1カラムで表示されます。

sfgbsdgdsf-1

 

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。