Question

我正在创建一个示例仪表板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");
});

Answer 1

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

展开一列/ div，同时移动其他列

1 个答案: