使用 CSS 多列定位第 n 列答案

【问题标题】：Target nth column using CSS multi-columns使用 CSS 多列定位第 n 列
【发布时间】：2021-09-29 02:19:08
【问题描述】：

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

【问题讨论】：

一个问题：为什么不是两个单独的 div？这个要求背后的原因是什么。
因为应该从一列流向另一列的文本将通过具有单个文本字段的 CMS 进行管理，以防止用户手动拆分文本。
如果最初只有一个 div 之后使用 javascript 动态拆分怎么办？另外，您能否详细说明一下->“以防止用户手动拆分文本”？
是的，我对 JS 解决方案完全开放。会有 Columnizer (welcome.totheinter.net/columnizer-jquery-plugin) 这对我的需要来说有点太多了，我发现了一个小 sn-p 计算字符然后将文本分成两个相等的一半 (stackoverflow.com/a/8605762/1706680)。我认为这值得扩展，但我的 JS 技能水平非常低。 // 我不想让用户思考。在 CMS 中，文本应该粘贴到一个文本字段中（而不是两个，因为很容易生成两个 div）；列化应该由系统完成。

标签： css css-multicolumn-layout

【解决方案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/

【讨论】：

【解决方案2】：

抱歉应该是一个评论 --> 如果您查看输出的 HTML 标记，您将看到在 .columns 列下没有子元素，因为您试图定位 div 列的子列，所以您所拥有的将不起作用。 count 是一种样式，.columns 中没有元素可以应用其他样式。

【讨论】：