展开一列/ div，同时在其周围移动其他列
Posted
技术标签:
【中文标题】展开一列/ div，同时在其周围移动其他列【英文标题】：expand one column/div, while moving other columns around it 【发布时间】：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 - 列的宽度相同。并且只有一张被点击的卡片应该展开。同一列中的其他卡片保持相同大小 【参考方案1】：要解决您的问题，您应该首先更改列 div 的宽度，而不是卡片 div。然后，一旦您将所有宽度设置为百分比而不是 px（这将确保它永远不会溢出）。然后当你使用 JS 时改变每一列的宽度。例如：33% 33% 33% -> 49% 25% 25%。如果卡片 div 设置为百分比，那么一切都应该正常工作。
【讨论】：
如果你给我你想要的百分比，我会给你一个示例代码。 也许您可以编辑您的答案以包含一些示例代码，而不仅仅是解释步骤？以上是关于展开一列/ div，同时在其周围移动其他列的主要内容，如果未能解决你的问题，请参考以下文章