【问题标题】:Is there a way using purely CSS to style columns separately?有没有办法使用纯 CSS 单独设置列的样式?
【发布时间】:2017-02-06 14:50:04
【问题描述】:

在我正在进行的一个项目中,有几个地方有两列文本。由于这是可管理的内容,我真的不想创建两个单独的文本区域供用户填写,而是我在 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;
}

【问题讨论】:

  • 请提供当前代码
  • @ImmortalDude 只是一个带有文本的 p 元素。
  • 正如@sahildhir 所说,我们需要您当前的代码、您尝试过的代码等。
  • parent[selector] p:first-child{ text-align:left} , parent[selector] p:first-child{ text-align:right}
  • 我添加了一些示例标记。我确实在我的问题中声明文本将位于单个 p 元素内。

标签: css


【解决方案1】:

到目前为止,还没有办法在纯 CSS 中定位列。最接近的方法是使用 JavaScript 将其拆分为新元素,或修改您的标记。

之前也有人问过类似的问题:https://stackoverflow.com/a/21238260/271271

【讨论】:

  • 完全相同的答案...没有办法像现在一样定位列。以下是关于列属性的详细信息-w3schools.com/css/css3_multiple_columns.asp
  • 我知道,这就是我链接它的原因。
  • 希望在某个时候将支持添加到 CSS 中。现在我可能会使用 PHP 方法,只是因为我的要求。如链接答案中所述,JS 也可以正常工作。
【解决方案2】:

你可以试试这个吗:

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

or alternatively try this SO link

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

【讨论】:

    猜你喜欢
    • 2012-05-28
    • 2012-09-09
    • 1970-01-01
    • 2018-06-22
    • 2016-02-12
    • 1970-01-01
    • 1970-01-01
    • 2010-09-15
    • 1970-01-01
    相关资源
    最近更新 更多