html - 使用 float 元素扩展垂直空间问题

Question

我有一个布局，需要将元素列表组织成两个垂直列。这些元素在一个列表中 <div> s，标记也被重新用于移动设备，所以我不想修改结构。

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

现在我有一个基本的 float 元素解决方案，但是当我展开内容区域时，垂直空间会在两列中展开，而不仅仅是一列。

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

是否可以设置样式以支持所需的行为？或者我是否必须修改元素的结构才能使其正常工作？预先感谢您的帮助!

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 元素，因为这意味着必须计算上面所有元素的高度，但你想做多少工作是你的事。