2012-05-09 13 views
0

たとえば、PHPを使用して時系列的にMySQLデータベース内の複数の投稿からテキストを引き出しているとします。私は自分の投稿を左右に交互に並べて表示したい。動的代替右左揃え

重要なことに、投稿を削除できるようにしたいと思います。投稿が削除された場合は、他の投稿に動的な交互配置を保持したい。

CSSを使用してこれを行う方法に関するアイデアを教えていただけますか?

+0

投稿が動的に削除され、他のすべての行が再着色されることを意味しますか? – JakeParis

+0

いいえ、私は動揺しているものを夢中にするつもりはありません。これは最初の本格的なアプリのスクラッチには十分です。本当にありがとう! – Joseph

答えて

2

使用:oddと(新しいブラウザ上):even pseudoClasses

例えば:あなたのスタイルシートで、その後

//php file 
$alt = 'Row'; 

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

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

あなたはポストの削除後に、以前の順序を保持したい場合は、投稿を削除するとき、ちょうどdisplay: noneを設定する(代わりにDOMからノードを除去する)

したい場合は代わりにdinamycally以下のすべてを再配置投稿だけでノードが完全に削除されます

+0

これらの疑似クラスのブラウザはどのようにサポートされていますか? (snarkyではなく、実際の質問) – JakeParis

+0

残念ながらIE <= 8で作業していない – fcalderan

+0

興味深い。これは、divの2つの子要素がすべて一列に並ぶことを意味しますか?あるいは、各div要素に特定のIDを与えなければなりませんか? – Joseph

2

dbから結果を受け取ったら、PHP変数にクラス名を入れてください。 foreachループでは、ループが実行されているときに2つのクラス名の間で切り替えます。そのような:

.Row { 
    text-align: left; 
} 

.altRow { 
    text-align: right; 
} 
+0

申し訳ありませんが、コード内のエラーが修正されました。 – JakeParis

+0

'foreach($結果は$ key => $行){$ odd = $ key&1? 'odd': 'even';} ' – Mikey

+0

@Mikeyなぜ? .... – JakeParis

関連する問題