4

WordPressから記事を生成するphpコード内に1つの記事タグがあります。それらはすべて同じ高さではなく、内容によって異なります。それらはfloatによって2つの列に編成されています。

最初の行の記事が同じ行の他の記事と同じ高さでない場合、2番目の行は大きい方のdivの下部に揃えられます。今、私はそれらを間隔を空けずに整列させたいと思います。

ここにいくつかのcssがあります：

#container {
width: 1000px;
margin: 0px auto;
}

article {
position: relative;
width: 435px;
margin: 10px 10px;
background-color: rgba(0, 0, 0, 0.5);
padding: 20px;
float: left;
}

jsFiddleを編集します（問題を示すためのコンテンツが含まれています）：http：//jsfiddle.net/4PMj5/6/

4

1 に答える 1

1

evenCSSでodd疑似選択を使用できます。

article:nth-child(even) {
    position: relative;
    width: 435px;
    margin: 10px 10px;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 20px;
    float: right;
}
article:nth-child(odd) {
    position: relative;
    width: 435px;
    margin: 10px 10px;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 20px;
    float: left;
}

結果は次のようになります：この更新されたフィドル。

于 2013-03-11T11:45:28.700 に答える