有没有办法使用纯CSS单独设置列的样式?

时间:2017-02-03 10:41:26

标签: css css3

在我正在进行的项目中,有几个地方有两列文字。由于这是内容可管理的,我真的不想为用户填写两个单独的文本区域,而是我在CSS中将column-count: 2分成两列。内容将位于单个p元素内。

问题是我需要稍微改变第二列的样式。我需要将text-align更改为正确,同时保留第一列text-align

我知道我可以用PHP和/或JavaScript做到这一点,但如果可能,我更愿意单独使用CSS。

标记:

<div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab nostrum delectus iste sit officia! Molestiae ducimus, sunt omnis earum, vitae vel dolore blanditiis placeat, porro aliquid, non repudiandae recusandae quisquam sit enim. Aliquid placeat, obcaecati autem aut. Eum eaque nemo, voluptas repellat ab recusandae, culpa eos quam voluptates, molestias expedita ipsum debitis dolorem atque explicabo labore consequuntur cumque adipisci quos eveniet error. Sint, provident cum. Totam, nisi, quo. Hic, fugit, iusto. Veniam est nulla, debitis commodi provident fugiat quam earum incidunt, cum vel minima ipsum magnam cupiditate tenetur autem obcaecati aliquam soluta, repellat in quibusdam illo! Dicta numquam, saepe corrupti.</p>
</div> <!-- /.content -->

CSS:

.content p {
    column-count: 2;
}

2 个答案:

答案 0 :(得分:1)

截至目前,无法在纯CSS中定位列。最接近的是使用JavaScript将其与新元素分开,或者修改标记。

之前已经提到过类似问题:https://stackoverflow.com/a/21238260/271271

答案 1 :(得分:-3)

你可以试试这个:

table.secondcolumn td:nth-child(2) { text-align: left; }

or alternatively try this SO link

编辑/更新:显然,没有直接的方式(通过CSS)通过CSS设置特定文本列的样式。