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

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

Answer 3

如果这不是动态的，这是一个简单的解决方案，你正在寻找什么？请注意，您可以将ID和类组合为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>

Answer 4

您可以将jquery用于此

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

无需担心croos浏览器兼容性

Answer 5

你可以为段落提供不同的类名

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

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

编辑css进行内容定位

5 个答案: