css - Column-Count & Column-Gap に代わる IE

Question

column-countandを使用する代わりに IE があるかどうか疑問に思っていcolumn-gapます。

5 番目の要素ごとに新しい列を自動的に作成するリストの作成について、この記事を作成しました。Leniel はcolumn-countandを使用するソリューションを提案しましたcolumn-gapが、これは IE ではサポートされていません。フォールバックソリューションを探しています。

score 8 · Accepted Answer

私はこれを見つけました: CSS3 を使用した複数列のレイアウト。CSS3 Multi-Column Browser Supportというタイトルのセクションを読んでください。次のように述べています。

複数列をサポートしていないブラウザーをサポートする必要がある場合は、それらのブラウザーのフォールバックオプションが必要です。Modernizrスクリプトを使用してそれを行う方法は次のとおりです...

次の SCRIPT タグを HEAD 内の他のスタイルシートの後に配置します。

<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.0.6/modernizr.min.js"></script>

上記の行の下に別の SCRIPT を追加します。

<script>
Modernizr.load({
  test: Modernizr.csscolumns,
  yep: 'columns.css',
  nope: 'no-columns.css'
});
</script>

複数列の CSS を含む CSS スタイルシートを作成し、同じディレクトリに column.css として保存します。
フォールバック CSS (フロートのある列など) を含む CSS スタイルシートを作成し、同じディレクトリに no-columns.css として保存します。IE と Chrome、Safari、または Opera でページをテストします。

ページMultiple Columnsは、この方法に興味がある場合に JavaScript フォールバックを提供します。

score 4 · Accepted Answer

これは、 column-count プロパティで作成されたものと同じように見え、ALL BROWSERSで動作する複数列のメニューを作成する方法です。

これはフローティング要素で行われますが、ここでの秘訣は、JavaScript (またはサーバー側) で要素を並べ替えて、自然な流れが左右ではなく上下に見えるようにすることです。

アイテム1 アイテム4 アイテム7

アイテム2 アイテム5 アイテム8

アイテム3 アイテム6

例: http://jsfiddle.net/xrd5Y/16/

// number of columns
var columns = 4;

var $ul = $('ul.multicolumn'),
    $elements = $ul.children('li'),
    breakPoint = Math.ceil($elements.length/columns);
    $ordered = $('<div></div>');

function appendToUL(i) {
    if ($ul.children().eq(i).length > 0) {
        $ordered.append($ul.children().eq(i).clone());
    } 
    else $ordered.append($('<li></li>'));
}

function reorder($el) {
    $el.each(function(){
        $item = $(this);

        if ($item.index() >= breakPoint) return false;

        appendToUL($item.index());
        for (var i = 1; i < columns; i++) {
            appendToUL(breakPoint*i+$item.index());
        }
    });

    $ul.html($ordered.children().css('width',100/columns+'%'));
}

reorder($elements);

score 2 · Accepted Answer

JS や IE 専用の条件を使用するのではなく、Modernizr のクラスをスタイルシートで直接使用できます。

Web ページで要素の検査を行うと、多くの CSS クラスが html タグに追加されていることがわかります。

ユーザーのブラウザーが css 列をサポートしていない場合は、要素を浮動させるために使用できる「no-csscolumns」クラスが表示されます。

score -2 · Accepted Answer

これは、IEとIE Edgeで発見した簡単な解決策で、各列を段落ごとに区切るだけ<p> your text </p>で、 column-2<p> your text </p>でうまくいきました。

#subfootera {
    with:100%;
    text-align:left;
    padding-top: 20px;
    padding-bottom: 20px;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #000;
    text-shadow:1px 1px 1px #999;

}

.subfooterb {
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
    -webkit-column-gap: 10px; /* Chrome, Safari, Opera */
    -moz-column-gap: 10px; /* Firefox */
    column-gap: 10px;
}

  <div id="subfootera">
    <div class="subfooterb">
    <p>Your Text.</p>
    <p>Your text or an img</p>
     </div>
  </div>

css - Column-Count & Column-Gap に代わる IE

4 に答える 4

Related

Reference