0

我是网页设计的新手，我想编辑我的 css 文件以交替显示左右对齐的内容，这是我的 css

 #text-box-3 {
text-align:center;
padding:0px 90px;
line-height:24px;
}

目前它以中心对齐显示所有段落，但我希望它交替显示（即第一个段落应该在左边，第二个应该在右边，第三个应该在左边等等），这是我的 div 标签

<div id="text-box-3">
4

5 回答 5

2

好吧，对于大多数现代浏览器（Internet explorer 9+ 和所有其他浏览器），您可以通过以下方式实现：

div:nth-child(odd)  {text-align : right;}
div:nth-child(even) {text-align : left;}
于 2013-09-26T16:58:22.507 回答
0

如果这不是动态的，那么您正在寻找这样一个简单的解决方案吗？请注意，您可以将 ID 和 Class 组合到 div 以满足您的组织需求。

CSS
----------------------------
#text-box-3 {
    padding:0px 90px 0 0;
    line-height:24px;
}

#text-box-4 {
    //style
}

.text-box-left {
    text-align:left;
}

.text-box-right {
    text-align:right;
}

HTML
------------------------------
<div id="text-box-3" class="text-box-left">
    <!---content--->    
</div>
<div id="text-box-4" class="text-box-right">
    <!---content--->
</div>
于 2013-09-26T17:01:25.330 回答
0

您可以为此使用 jquery 

$("#text-box-3 p:odd").css("text-align", "right");
$("#text-box-3 p:even").css("text-align", "left");

无需担心croos浏览器兼容性

于 2013-09-26T17:02:47.293 回答
0

这是一个工作示例http://jsfiddle.net/EsB9u/。在http://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child阅读有关 nth-child 的信息 

<div>
    <p>Lorem ipsum</p>
    <p>Dolor sit amet</p>
    <p>Whatever else</p>
    <p>Something</p>
</div>

div p:nth-child(even) {
    text-align: right;
}
于 2013-09-26T17:00:32.470 回答
0

你可以给段落不同的类名

<p class="right">...</p>
<p class="left">...</p>

并使用 css 为每个类设置样式。

于 2013-09-26T17:05:00.570 回答