【发布时间】: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