3

这就是问题所在。我得到了简单的 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/

4

3 回答 3

3

您可以添加一个 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);
于 2013-03-07T14:24:43.223 回答
0

检查这个小提琴：

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

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

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

进而

overflow: hidden;

在主 div 上

于 2013-03-07T14:28:48.113 回答
0

尝试使用JQuery masonry。它可以将你所有的积木整齐地堆叠DIV在一起

于 2013-03-07T16:27:59.910 回答