Question

我有一个布局，需要将项目列表组织成两个垂直列。这些项目位于<div> s的单个列表中，标记也会重新用于移动设备，因此我不想修改结构。

我在这里遇到的问题是每个项目都有一个扩展的内容区域，用户可以切换，当这个内容被扩展时，该列的垂直空间需要向下扩展，而另一列保持固定。

现在我有一个带有浮动项目的基本解决方案，但是当我扩展内容区域时，垂直空间会扩展到两个列而不只是一个。

Here's a link以我现在所拥有的功能为例，下面是所需行为的屏幕截图。

[screenshot]

是否可以设置此样式以支持所需的行为？或者我将不得不修改项目的结构以使其工作？在此先感谢您的帮助！

Answer 1

你的前提是有缺陷的。文档结构从左到右，从上到下流动。您需要对结构进行一些更改...最简单的方法是为左列和右列添加两个容器。否则，你会遇到一些棘手的绝对定位标记，以及一些小巧的jquery，我只能通过为每个面板添加一些唯一的ID来建议。

我个人会根据您的示例添加panel1到panel4之类的ID，然后使用此javascript（或类似代码）作为跳出点：

for(var i=1; i<=4; i++) {
        $('#panel'+i).css('left', function(index) {
           if(i%2 == 0) return "120px";
           else return "0px"; 
        });
}

$('.more').click(function(e) {
    e.preventDefault();
    $(this).parent().children('p').toggle();
    var id = $(this).parent().attr("id");
    switch( id ) {
        case 'panel1':
          console.log("panel1 found");
          $('#panel3').css('top', function(index) {
            var buffer = $('#'+id).height() + 20 + "px";
            return buffer;
          });
          break;
        case 'panel2':
          $('#panel4').css('top', function(index) {
            var buffer = $('#'+id).height() + 20 + "px";
            return buffer;
          });
          break;
        default: break;
    }
});

使用这些面板的css中的默认值：

#panel1 { top:0px; }
#panel2 { top:0px; }
#panel3 { top:56px; }
#panel4 { top:56px; }

你调整html越少，你在javascript中创建的工作就越多。

修改：

建议备用Javascript删除需要更改HTML，假设每行两个元素。因为我们知道这行是问题......

var ct = 1 $('#container > div').each(function(index, domEle) { $(domEle).attr('id', 'panel'+ct); $('#panel'+ct).css({ 'position': 'absolute', 'left' : function(index, value) { if(ct%2 == 0) return "120px"; else return "0px"; }, 'top' : function(index, value) { return (56 * Math.floor(ct/3)) + "px"; } }); ct++; }); $('.more').click(function(e) { e.preventDefault(); $(this).parent().children('p').toggle(); var id = $(this).parent().attr("id"); switch( id ) { case 'panel1': $('#panel3').css('top', function(index) { var buffer = $('#'+id).height() + 20 + "px"; return buffer; }); break; case 'panel2': $('#panel4').css('top', function(index) { var buffer = $('#'+id).height() + 20 + "px"; return buffer; }); break; default: break; } });

现在不需要对HTML进行任何更改，但是您需要重做单击功能以在单击后处理元素的重新定位。在扩展新框之前，我会让生活变得轻松并隐藏所有.more项，因为这意味着必须计算上述所有元素的高度，但是您想要做多少工作就是您的业务。

Answer 2

这是四个面板的 PURE CSS解决方案（我不知道你是否打算有更多，我没有6 [2宽3高]工作了 - 并怀疑它是不可能的）。它适用于FF和IE8 / 9。请参阅小提琴：http://jsfiddle.net/bEgwB/203/

然而，IE8遇到重绘错误，导致面板3无法移动，因此需要额外的javascript帮助（上面添加小提琴），IE7需要一些边距调整才能正确定位面板4（但是即使没有额外的JavaScript帮助也没有重绘问题）。 更新（11-18-11）：这是IE7保证金调整的小提琴：http://jsfiddle.net/bEgwB/286/

编辑：我的CSS的先前版本有display次调用是不必要的。

HTML

<div id="container">
    <div class="panel one">
        Panel 1<br />
        <a class="more" href="#">more</a>
        <p>More Info 1 with some additional content</p>
    </div>
    <div class="panel two">
        Panel 2<br />
        <a class="more" href="#">more</a>
        <p>More Info 2 with some additional content</p>
    </div>
    <div class="panel three">
        Panel 3<br />
        <a class="more" href="#">more</a>
        <p>More Info 3 with some additional content</p>
    </div>
    <div class="panel four">
        Panel 4<br />
        <a class="more" href="#">more</a>
        <p>More Info 4 with some additional content</p>
    </div>
</div>

CSS

a {color:yellow;}
#container {width:0 ; padding: 0 130px;}
.panel {
    background-color:green;
    padding:5px;
    color:#fff;
    width:100px;
}
.panel p {display:none;}

.panel.one {
    float: left;
    margin:10px 0 10px -120px;
}
.panel.two {
    float: right;
    margin: 10px -120px 20px 0;
}
.panel.three {
    float: left;
    clear: left;
    margin:10px 10px 10px -120px;
}
.panel.four {
    clear: right;
    margin: 10px;
}

JAVASCRIPT

$('.more').click(function(e) {
    e.preventDefault();
    $(this).parent().children('p').toggle();
    /* the following fix IE8 */
    $(this).parent().parent().hide();
    $(this).parent().parent().show();
});

Answer 3

您需要再添加两个div - 左右列，并在这两个div之间拆分您的项目。这是如何使它们独立的方式，这里是jsfiddle。

HTML

<div id="container">
    <div class="left">
        <div class="panel">
            Panel 1<br />
            <a class="more" href="#">more</a>
            <p>More Info 1 with some additional content</p>
        </div>
        <div class="panel alt">
            Panel 2<br />
            <a class="more" href="#">more</a>
            <p>More Info 2 with some additional content</p>
        </div>
    </div>
    <div class="right">
        <div class="panel">
            Panel 3<br />
            <a class="more" href="#">more</a>
            <p>More Info 3 with some additional content</p>
        </div>
        <div class="panel alt">
            Panel 4<br />
            <a class="more" href="#">more</a>
            <p>More Info 4 with some additional content</p>
        </div>
    </div>
</div>

CSS

a {color:yellow;}
#container {width:300px; position:relative;}
.panel {background-color:green;padding:5px;color:#fff;width:100px;margin:10px;}
.panel p {display:none;}
.left {
    width: 50%;
    float: left;
}
.right {
    width: 50%;
    float: right;
}

Answer 4

可能你可以这样做column-count属性：

a {color:yellow;}
#container {
    width:300px;
    -moz-column-count: 2;
        -moz-column-gap: 50%;
        -webkit-column-count: 2;
        -webkit-column-gap: 50%;
        column-count: 2;
        column-gap: 50%;

}
.panel p {display:none;}
.panel {background-color:green;padding:5px;color:#fff;width:100px;margin:10px;}
.alt{
    margin-bottom:90px;
}

检查这个小提琴http://jsfiddle.net/bEgwB/87/

<强>已更新

检查一下：

http://jsfiddle.net/bEgwB/276/

Answer 5

有一种造型解决方案。要将两列连接在一起，需要额外级别的绑定，您可以通过向“container”，“display：table”添加样式属性并使用“display：table-cell”添加到面板。

这将保持高度同步。 “container”和“panel”类都必须具有声明的宽度，否则它们会使布局变得混乱。 IE在支持这些属性方面很弱，因此这可能是解决方案的问题。

Answer 6

如果我正确地理解，你想要的就是这样的 http://jsfiddle.net/bEgwB/275/

你需要同时使用css属性 display：inline-block 和 float：left 来实现你的jpg效果。如果我的标记正确并且看起来像预期的那样，我可以用javascript帮助你，如果现在不行的话

祝你好运。

用浮动元素扩展垂直空间问题

6 个答案:

http://jsfiddle.net/bEgwB/276/