css - 使用 CSS 多列定位第 n 列

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/

如果没有，您是否有任何其他想法如何在两列内动态 float 文本(不是两个单独的 div，也不是使用 CSS 区域)并能够分别设置每列的样式？

Answer 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 元素中，类为“column”。现在您可以使用您喜欢的任何 CSS 技术来设计您的列。

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