3

CSS マルチカラムを使用する場合、n 番目のカラムをターゲットにすることは可能ですか?

例: 2 列のレイアウトがあり、2 番目の列のみをターゲットにしたい:

HTML

<div class="columns">   
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.   
</div>

CSS

.columns {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
}
    
.columns:nth-child(odd) {
    margin-top: 100px;
}

http://jsfiddle.net/XH72Y/3/

そうでない場合は、各列を個別にスタイルする機能を使用して、2 つの列 (2 つの個別の div ではなく、CSS 領域ではなく) 内でテキストを動的にフロートする方法が他にありませんか?

4

2 に答える 2

1

jQuery スクリプトを使用して、div を N 列に分割します。

var $columns = $('.columns');

$columns.each(function() {
    var $column = $(this);
    var numColumns = 2;
    var words = $column.text().split(" ");
    var columnLength = Math.round(words.length / numColumns);

    $column.html("");

    for (var i=0; i<numColumns; i++) {
        var columnArray = words.slice( (i * columnLength), ( (i + 1) * columnLength) );
        $column.append(
            $("<div>")
                .addClass("column")
                .html(columnArray.join(" ")));
    }
});

これで、各列が「列」クラスの新しい div 要素にラップされます。これで、好きな CSS テクニックを使用して列のスタイルを設定できます。

http://jsfiddle.net/XH72Y/4/

于 2014-08-05T13:40:45.643 に答える
0

申し訳ありませんがコメントする必要があります --> 出力された HTML マークアップを見ると、div 列の子をターゲットにしようとしているため、.columns の下に子要素がないことがわかります。 style .columns 内に、追加のスタイルを適用する要素がありません。

于 2014-08-04T16:50:48.260 に答える