3

使用 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 区域），并能够单独设置每列的样式？

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

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

于 2014-08-05T13:40:45.643 回答
0

抱歉应该是评论->如果您查看输出的 HTML 标记，您将尝试定位 div 列的子列，您将看到 .columns column-count 下没有子元素style .columns 中没有元素可以应用其他样式。

于 2014-08-04T16:50:48.260 回答