Question

使用CSS多列时是否可以定位第n列？

例如：我有两列布局，并且只想定位第二列：

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/

如果没有，您是否有任何其他想法如何在两列（不是两个单独的div而不是CSS区域）内动态浮动文本，并能够单独设置每一列的样式？

Answer 1

抱歉应该是评论 - ＆gt;如果你看看输出的HTML标记，你会看到在.columns下没有子元素，你所拥有的东西将无法工作，因为你试图定位div列的子元素列数是一种样式，在.columns中没有元素将其他样式应用于。

Answer 2

使用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(" ")));
    }
});

现在每个列都将包含在一个带有“column”类的新div元素中。现在，您可以使用您喜欢的任何CSS技术设置列的样式。

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

使用CSS多列定位第n列

2 个答案: