■フロートした要素の高さを揃えたいときに便利。
.item {
width: 100%;
height:4.7em; /* 高さ */
overflow:hidden; /* 上記高さからはみ出る部分は非表示 */
margin-bottom: 3px;
display: block;
}
■フロートした右端のdivが落ちないようにする
例)3列表示の場合、右端(3番目、6番目)のdivだけ、margin-rightを「0」にする。
#main .item2 {
width: 248px;
float: left;
margin-right: 10px;
margin-bottom: 10px;
}
#main .item2 + .item2 + .item2 /* 3番目 */
#main .itemt + .item2 + .item2 + .item2 + .item2 + .item2 /* 6番目 */ {
margin-right: 0px;
}
.item {
width: 100%;
height:4.7em; /* 高さ */
overflow:hidden; /* 上記高さからはみ出る部分は非表示 */
margin-bottom: 3px;
display: block;
}
■フロートした右端のdivが落ちないようにする
例)3列表示の場合、右端(3番目、6番目)のdivだけ、margin-rightを「0」にする。
#main .item2 {
width: 248px;
float: left;
margin-right: 10px;
margin-bottom: 10px;
}
#main .item2 + .item2 + .item2 /* 3番目 */
#main .itemt + .item2 + .item2 + .item2 + .item2 + .item2 /* 6番目 */ {
margin-right: 0px;
}