编辑css进行内容定位

Question

i am new to web designing, and I want to edit my css file for displaying a content in left and right alignment alternatively, here is my css

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

currently it displays all the paragraph in center alignment, but i want it in alternate (ie 1st paragraph should be in left, 2nd should be in right, and 3rd one should be in left and so on), here is my div tag

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

Answer 1

Well, with most modern browsers (Internet explorer 9+ and all other browsers), you could achieve this by using :

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

Answer 2

Here is a working example http://jsfiddle.net/EsB9u/ . Read about nth-child at http://developer.mozilla.org/en-US/docs/Web/CSS/: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

If this is not dynamic, is a simple solution like this what you're looking for? Note that you can combine ID's and Class's to divs to suit your organizational needs.

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

You can use jquery for this

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

No need to worry about croos browser compatibility

Answer 5

you could give different class names to paragraphs

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

and style each class with css.