编辑css以进行内容定位

Question

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

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

目前它以居中对齐的方式显示所有段落，但我希望它交替显示(即第一个段落应该在左边，第二个段落应该在右边，第三个段落应该在左边，以此类推)，这是我的div标签

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

Answer 1

对于大多数现代浏览器(Internet explorer 9+和所有其他浏览器)，您可以通过使用以下命令来实现这一点：

div:nth-child(odd)  {text-align : right;}
div:nth-child(even) {text-align : left;}

Answer 2

这是一个有效的http://jsfiddle.net/EsB9u/示例。在http://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child上阅读关于第n个孩子的信息

<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;
}

Answer 3

如果这不是动态的，那么像这样的简单解决方案是您正在寻找的吗？请注意，您可以将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>