css - CSSで左右交互配置

Question

PHPを使用して、画像のページを表示しています。これらの写真を含めるための div タグがあります。

私がやろうとしているのは、これらの画像をブラウザの左側と右側に交互に配置することです。

したがって、エントリ 1 は左側に配置され、下にスクロールするとエントリ 2 は右側に配置されます。

私の div コンテナがstyle="position:relative;width=100%" ブラウザの左側と側面を抱きしめる画像を交互に作成するにはどうすればよいですか?

score 8 · Accepted Answer

いくつかの方法が考えられますが、その 1 つとして次のようなものがあります。

CSS:

div img{
 float:left;  
 clear:both;    
}
div img:nth-of-type(2n){
  float:right;
}

例を確認する

そのように交互にしたくない場合は、使用します

div img{
 float:left;  
 clear:left;    
}
div img:nth-of-type(2n){
  float:right; 
  clear:right;
}

サポートする必要があるブラウザーに応じて (Internet Explorer 8 以前はそのセレクターをサポートしていません)、すべての偶数画像でクラスを使用し、:nth-of-type(2n)そのクラスに置き換えます。

score 2 · Accepted Answer

左利きの人のために：

style="float:left;clear:left;"

そして右のハガーのために

style="float:right;clear:right;"

...ただし、コンテナの幅が 2 つ以上の画像を収めるのに十分でない場合は、「クリア」宣言は必要ありません。

score 0 · Accepted Answer

画像を反復するループのインデックス変数であるfloat: left;場合index%2 == 0とfloat: right;場合を設定します。index%2==1 index

score 0 · Accepted Answer

他の回答と同様に

div img:nth-child(even) { float: right; clear: right; }
div img:nth-child(odd) { float: left; clear: left; }

4 に答える 4