奇数和偶数元素的左右浮动

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的内容太高，我会在旁边的空间之间得到空的空间，就像有一些清晰的东西：两者都是这个div。

示例：

我希望它总是看起来像这样，没有任何空格：

我无法更改html（divs＆amp; asides order），我只能更改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);

Answer 2

检查这个小提琴：

http://jsfiddle.net/HRp2H/4/

它利用css hack使浮动柱的高度相同：

margin-bottom: -500px;
padding-bottom: 500px;
overflow: hidden;

然后

overflow: hidden;

上的

答案 2 :(得分：0)

尝试使用JQuery masonry。它可以将所有DIV块整齐地叠加在一起

Answer 3

尝试使用JQuery masonry。它可以将所有DIV块整齐地叠加在一起