展开一列/ div，同时在其周围移动其他列答案

【问题标题】：expand one column/div, while moving other columns around it展开一列/ div，同时在其周围移动其他列
【发布时间】：2015-11-23 14:23:59
【问题描述】：

我正在创建一个示例仪表板 UI，它有 3 个列/div，每列中有 3 个卡片或磁贴。单击时，我正在使用 jQuery 动画扩展每张卡片，当所选卡片展开时，同一列中的卡片/图块会向下移动。然而，其他列中的元素不会移动，并且卡片最终会相互重叠。展开其中一张时，如何从不同列中移动其他卡？（目前，只有左上角的卡片附有动画）

codepen - http://codepen.io/arjun2523/pen/bdXrPB

HTML

<html>
  <head>
    <title>3 column tiles</title>
    <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
  </head>
  <body>
  <div class = "container">
    <div class = "column-left"; overflow:auto>
      <div class = "card-blue expand" id = "blue-column-1"></div>
      <br>
      <div class = "card-green"></div>
      <br>
      <div class = "card-pink"></div>
    </div>

    <div class = "column-center">
      <div class = "card-blue"></div>
      <br>
      <div class = "card-green" id="green-column-2"></div>
      <br>
      <div class = "card-pink"></div>
    </div>

    <div class = "column-right">
      <div class = "card-blue"></div>
      <br>
      <div class = "card-green"></div>
      <br>
      <div class = "card-pink"></div>
    </div>
    </div>

CSS

.expand {
  height: 500px;
  width : 500px;
  position: relative;

}
.container {
  position:relative;
}

.column-right {
  float: right;
  width: 33%;
}

.column-center {
  display: inline-block;
  width: 33%;
}

.column-left {
  float: left;
  width: 33%;
}

.card-blue {
  cursor:pointer;
  height: 300px;
  width: 300px;
  position: relative;
  background-color: lightblue;
  padding: 10px;
  margin-bottom:10px;
}

#blue-column-1 {
  position:relative;

}

.card-green {
  cursor:pointer;
  height: 300px;
  width: 300px;
  position: relative;
  background-color: lightgreen;
  padding: 10px
}

.card-pink {
  cursor:pointer;
  height: 300px;
  width: 300px;
  position: relative;
  background-color: lightpink;
  padding: 10px
}

JAVASCRIPT

$("#blue-column-1").click(function(){
  var blue = $("#blue-column-1");
  blue.animate({height:'500px', width:'500px'}, "slow");
});

【问题讨论】：

您希望点击后其他列的宽度是多少？
可能使用水平布局并为您单击的 div 设置显示块
我有一些简单的问题。 1.是否希望点击后列的宽度相等（目前为33%）？ 2.是否还要展开同列的其他卡片？
@BryanHill - 其他列应保持相同的宽度。只是它们的位置会在点击一张卡片时受到影响，以便让开扩展卡片。
@Patrice - 列的宽度相同。并且只有一张被点击的卡片应该展开。同一列中的其他卡片保持相同大小

标签： javascript jquery html css dashboard

【解决方案1】：

要解决您的问题，您应该首先更改列 div 的宽度，而不是卡片 div。然后，一旦您将所有宽度设置为百分比而不是 px（这将确保它永远不会溢出）。然后当你使用 JS 时改变每一列的宽度。例如：33% 33% 33% -> 49% 25% 25%。如果卡片 div 设置为百分比，那么一切都应该正常工作。

【讨论】：

如果你给我你想要的百分比，我会给你一个示例代码。
也许您可以编辑您的答案以包含一些示例代码，而不仅仅是解释步骤？