Динамическое альтернативное выравнивание по правому краю

Question

Предположим, что я вытягиваю текст из нескольких сообщений в базе данных MySQL, хронологически используя PHP. Я хочу, чтобы мои сообщения отображались как альтернативные вправо и влево.

Важно отметить, что я хочу, чтобы сообщения могли быть удалены. Если сообщение удалено, я хочу, чтобы другие сообщения сохраняли динамическое чередующееся выравнивание.

Можете ли вы дать мне несколько идей о том, как это сделать с помощью CSS?

Answer 1

Использование :odd и :even pseudoClasses (на новый браузер)

например

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

если вы хотите сохранить прежний порядок после после удаления, просто установите display: none при удалении поста (вместо удаления узла из DOM)

Если вы хотите вместо того, чтобы изменить положение dinamycally все последующие сообщения просто удаляют полностью узел

Answer 2

После того как вы получили свои результаты из базы данных, поместите имя класса в переменную php. В цикле foreach переключайтесь между двумя именами классов, когда цикл работает. Как так:

//php file 
$alt = 'Row'; 

foreach($results as $row) { 
    echo '<div class="' . $alt . '">some content</div>'; 
    $alt = ($alt == 'Row') ? 'altRow' : 'Row'; 
} 

, а затем в таблице стилей:

.Row { 
    text-align: left; 
} 

.altRow { 
    text-align: right; 
}