html - 奇偶元素的左右浮动

Question

问题来了。我得到了简单的 html 模板:

<div class="wrapper"><div class="inside">

    <div class="left"><p>Lorem ipsum...</p></div>
    <aside><p>Lorem ipsum...</p></aside>
    <div class="left"><p>Lorem ipsum...</p></div>
    <aside><p>Lorem ipsum...</p></aside>
    <div class="left"><p>Lorem ipsum...</p></div>
    <aside><p>Lorem ipsum...</p></aside>

</div></div>

和简单的 CSS:

div.wrapper {width:1020px;margin:0 auto;}
div.wrapper .inside {padding: 10px;}
div.left {width:700px;background:#EEE;float:left;border-top:1px solid #000; clear: left;}
aside {width:300px;background:#CCC;float:right;border-top:1px solid #000; clear: right;}

我希望所有的 div 都在页面的左侧，一个接一个，没有任何间距，所有的旁白都在右侧。它就在那里。无论旁白的内容有多高，div 都可以正常工作。但是，如果任何 div 的内容太高，我就会在两侧之间留出空白，就像有类似 clear:both 和这个 div 的东西。

示例:

我希望它始终看起来像这样，没有任何空格:

我无法更改 html(divs&asides 顺序)，我只能更改 CSS。我可以使用 html5 和 css3。

http://jsfiddle.net/HRp2H/

Answer 1

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

http://jsfiddle.net/HRp2H/5

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;
}

在这里，我将您在 .inside 上的填充移到了它的子元素中:http://jsfiddle.net/HRp2H/3

更新:以下是您可以使用 jQuery 执行此操作的方法。我会使用我之前的回答作为后备。

http://jsfiddle.net/HRp2H/7/

.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('<div class="leftCol" />');
$('.wrapper .leftCol').append(myLefts);

$('.wrapper .inside').append('<div class="rightCol" />');
$('.wrapper .rightCol').append(myAsides);