редактирование CSS для позиционирования контента

Question

Я новичок в веб-разработки, и я хочу, чтобы изменить свой файл CSS для отображения содержимого в левой и правой выравнивании в качестве альтернативы, вот мой CSS

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

В настоящее время он отображает все абзац выравниванием по центру, но я хочу его в альтернативном (то есть 1-го пункта должно быть слева, второй должен быть справа, а третий один должен быть в левой и так далее), вот мой 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

<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

Если это не динамический, это простое решение, как это то, что вы ищете? Обратите внимание, что вы можете комбинировать идентификаторы и классы для разделов в соответствии с вашими организационными потребностями.

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.