html css 奇数偶数,CSS-奇数和偶数元素的左右浮动

您可以添加CSS渐变以模拟完整的列：

div.wrapper {

width:400px;

margin:0 auto;

padding: 10px;

}

div.wrapper .inside {

background: -moz-linear-gradient(left, #eee 250px, #ccc 250px);

overflow: auto;

}

div.left {

width:250px;

float:left;

border-top:1px solid #000;

clear: left;

}

aside {

width:150px;

float:right;

border-top:1px solid #000;

clear: right;

}

更新：这是使用jQuery的方法.我会用我先前的答案作为后备.

.leftCol, .rightCol {float: left;}

.leftCol .left, .rightCol aside {display: block}

div.left {

display: none;

...

}

aside {

display: none;

..

}

var myLefts = $('.inside').clone().find('aside').remove().end().html();

var myAsides = $('.inside').clone().find('.left').remove().end().html();

$('.wrapper .inside').html('');

$('.wrapper .inside').append('

$('.wrapper .leftCol').append(myLefts);

$('.wrapper .inside').append('

$('.wrapper .rightCol').append(myAsides);