早上好，我有一個要求在3列布局上有一個「pinterest」風格的頁面。每一列的高度都相同，但是當我們「顯示/隱藏」內容時，我們只希望展開該列，但是這些列將以某種方式進行展開，然後重新排序。我知道這是列計數應該如何工作，但無論如何強迫列留在原地？使用列數與集成顯示/隱藏移動列左右
#columns {
-webkit-column-fill: balance;
-moz-column-fill: balance;
column-fill: balance;
我試圖改變列填補自動平衡，但似乎並沒有工作。點擊1可以正常工作，但我認爲這是因爲隱藏的內容在玩完後不會很長時間。
$(".toggleDisplay").click(function() {
$(this).children(".display_none").toggle("slow");
});body {
\t background: url(http://subtlepatterns.com/patterns/scribble_light.png) ;
}
#wrapper {
\t width: 90%;
\t max-width: 1100px;
\t min-width: 800px;
\t margin: 50px auto;
}
#columns {
\t -webkit-column-count: 3;
\t -webkit-column-gap: 10px;
\t -webkit-column-fill: auto;
\t -moz-column-count: 3;
\t -moz-column-gap: 10px;
\t -moz-column-fill: auto;
\t column-count: 3;
\t column-gap: 15px;
\t column-fill: auto;
}
.pin {
\t display: inline-block;
\t background: #FEFEFE;
\t border: 2px solid #FAFAFA;
\t box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
\t margin: 0 2px 15px;
\t -webkit-column-break-inside: avoid;
\t -moz-column-break-inside: avoid;
\t column-break-inside: avoid;
\t padding: 15px;
\t padding-bottom: 5px;
\t background: -webkit-linear-gradient(45deg, #FFF, #F9F9F9);
\t opacity: 1;
\t
\t -webkit-transition: all .2s ease;
\t -moz-transition: all .2s ease;
\t -o-transition: all .2s ease;
\t transition: all .2s ease;
}
.pin img {
\t width: 100%;
\t border-bottom: 1px solid #ccc;
\t padding-bottom: 15px;
\t margin-bottom: 5px;
}
.pin p {
\t font: 12px/18px Arial, sans-serif;
\t color: #333;
\t margin: 0;
}
@media (min-width: 960px) {
\t #columns {
\t \t -webkit-column-count: 4;
\t \t -moz-column-count: 4;
\t \t column-count: 4;
\t }
}
@media (min-width: 1100px) {
\t #columns {
\t \t -webkit-column-count: 5;
\t \t -moz-column-count: 5;
\t \t column-count: 5;
\t }
}
.display_none {display:none;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
\t <div id="columns">
\t \t <div class="pin">
\t \t \t <img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" />
\t \t \t <p>
\t \t \t \t Lorem ipsum dolor sit amet, consectetur adipiscing elit.
\t \t \t \t Sed feugiat consectetur pellentesque. Nam ac elit risus,
\t \t \t \t ac blandit dui. Duis rutrum porta tortor ut convallis.
\t \t \t \t Duis rutrum porta tortor ut convallis.
\t \t \t </p>
<div class="toggleDisplay">
<button>Click 1</button>
<div class="display_none">
<p>Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae. Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae. Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.</p>
</div>
</div>
\t \t </div>
\t
\t \t <div class="pin">
\t \t \t <img src="http://cssdeck.com/uploads/media/items/1/1swi3Qy.png" />
\t \t \t <p>
\t \t \t \t Donec a fermentum nisi.
\t \t \t </p>
<div class="toggleDisplay">
<button>Click 2</button>
<div class="display_none">
<p>Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae. Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae. Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.</p>
</div>
</div>
\t \t </div>
\t
\t \t <div class="pin">
\t \t \t <img src="http://cssdeck.com/uploads/media/items/6/6f3nXse.png" />
\t \t \t <p>
\t \t \t \t Nullam eget lectus augue. Donec eu sem sit amet ligula
\t \t \t \t faucibus suscipit. Suspendisse rutrum turpis quis nunc
\t \t \t \t convallis quis aliquam mauris suscipit.
\t \t \t </p>
<div class="toggleDisplay">
<button>Click 3</button>
<div class="display_none">
<p>Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae. Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae. Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.</p>
</div>
</div>
\t \t </div>
\t
\t \t <div class="pin">
\t \t \t <img src="http://cssdeck.com/uploads/media/items/8/8kEc1hS.png" />
\t \t \t <p>
\t \t \t \t Nullam eget lectus augue. Donec eu sem sit amet ligula
\t \t \t \t faucibus suscipit. Suspendisse rutrum turpis quis nunc
\t \t \t \t convallis quis aliquam mauris suscipit.
\t \t \t </p>
<div class="toggleDisplay">
<button>Click 4</button>
<div class="display_none">
<p>Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae. Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae. Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.</p>
</div>
</div>
\t \t </div>
\t
\t \t <div class="pin">
\t \t \t <img src="http://cssdeck.com/uploads/media/items/1/1swi3Qy.png" />
\t \t \t <p>
\t \t \t \t Donec a fermentum nisi. Integer dolor est, commodo ut
\t \t \t \t sagittis vitae, egestas at augue.
\t \t \t </p>
<div class="toggleDisplay">
<button>Click 5</button>
<div class="display_none">
<p>Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae. Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae. Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.</p>
</div>
</div>
\t \t </div>
\t
\t \t <div class="pin">
\t \t \t <img src="http://cssdeck.com/uploads/media/items/6/6f3nXse.png" />
\t \t \t <p>
\t \t \t \t Lorem ipsum dolor sit amet, consectetur adipiscing elit.
\t \t \t \t Sed feugiat consectetur pellentesque. Nam ac elit risus,
\t \t \t \t ac blandit dui. Duis rutrum porta tortor ut convallis.
\t \t \t \t Duis rutrum porta tortor ut convallis.
\t \t \t </p>
<div class="toggleDisplay">
<button>Click 6</button>
<div class="display_none">
<p>Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae. Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae. Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.</p>
</div>
</div>
\t \t </div> \t
\t \t
\t \t <div class="pin">
\t \t \t <img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" />
\t \t \t <p>
\t \t \t \t Nullam eget lectus augue. Donec eu sem sit amet ligula
\t \t \t \t faucibus suscipit. Suspendisse rutrum turpis quis nunc
\t \t \t \t convallis quis aliquam mauris suscipit.
\t \t \t \t Duis rutrum porta tortor ut convallis.
\t \t \t </p>
<div class="toggleDisplay">
<button>Click 7</button>
<div class="display_none">
<p>Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae. Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae. Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.</p>
</div>
</div>
\t \t </div>
\t
\t \t <div class="pin">
\t \t \t <img src="http://cssdeck.com/uploads/media/items/1/1swi3Qy.png" />
\t \t \t <p>
\t \t \t \t Nullam eget lectus augue.
\t \t \t </p>
<div class="toggleDisplay">
<button>Click 8</button>
<div class="display_none">
<p>Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae. Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae. Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.</p>
</div>
</div>
\t \t </div>
\t
\t \t <div class="pin">
\t \t \t <img src="http://cssdeck.com/uploads/media/items/8/8kEc1hS.png" />
\t \t \t <p>
\t \t \t \t Lorem ipsum dolor sit amet, consectetur adipiscing elit.
\t \t \t \t Sed feugiat consectetur pellentesque.
\t \t \t </p>
<div class="toggleDisplay">
<button>Click 9</button>
<div class="display_none">
<p>Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae. Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae. Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.</p>
</div>
</div>
\t \t </div>
\t
\t \t <div class="pin">
\t \t \t <img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" />
\t \t \t <p>
\t \t \t \t Donec a fermentum nisi. Integer dolor est, commodo ut
\t \t \t \t sagittis vitae, egestas at augue. Suspendisse id nulla
\t \t \t \t ac urna vestibulum mattis. Duis rutrum porta tortor ut convallis.
\t \t \t </p>
<div class="toggleDisplay">
<button>Click 10</button>
<div class="display_none">
<p>Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae. Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae. Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.</p>
</div>
</div>
\t \t </div>
\t
\t \t <div class="pin">
\t \t \t <img src="http://cssdeck.com/uploads/media/items/1/1swi3Qy.png" />
\t \t \t <p>
\t \t \t \t Donec a fermentum nisi. Integer dolor est, commodo ut
\t \t \t \t sagittis vitae, egestas at augue. Suspendisse id nulla
\t \t \t \t ac urna vestibulum mattis.
\t \t \t </p>
<div class="toggleDisplay">
<button>Click 11</button>
<div class="display_none">
<p>Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae. Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae. Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.</p>
</div>
</div>
\t \t </div>
\t
\t \t <div class="pin">
\t \t \t <img src="http://cssdeck.com/uploads/media/items/6/6f3nXse.png" />
\t \t \t <p>
\t \t \t \t Lorem ipsum dolor sit amet, consectetur adipiscing elit.
\t \t \t \t Sed feugiat consectetur pellentesque. Nam ac elit risus,
\t \t \t \t ac blandit dui. Duis rutrum porta tortor ut convallis.
\t \t \t </p>
<div class="toggleDisplay">
<button>Click 12</button>
<div class="display_none">
<p>Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae. Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae. Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.</p>
</div>
</div>
\t \t </div> \t
\t \t
\t \t <div class="pin">
\t \t \t <img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" />
\t \t \t <p>
\t \t \t \t Donec a fermentum nisi. Integer dolor est, commodo ut
\t \t \t \t sagittis vitae, egestas at augue. Suspendisse id nulla
\t \t \t \t ac urna vestibulum mattis.
\t \t \t </p>
<div class="toggleDisplay">
<button>Click 13</button>
<div class="display_none">
<p>Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae. Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae. Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.</p>
</div>
</div>
\t \t </div>
\t
\t \t <div class="pin">
\t \t \t <img src="http://cssdeck.com/uploads/media/items/1/1swi3Qy.png" />
\t \t \t <p>
\t \t \t \t Donec a fermentum nisi. Integer dolor est, commodo ut
\t \t \t \t sagittis vitae, egestas at augue. Suspendisse id nulla
\t \t \t \t ac urna vestibulum mattis.
\t \t \t </p>
<div class="toggleDisplay">
<button>Click 14</button>
<div class="display_none">
<p>Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae. Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae. Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.</p>
</div>
</div>
\t \t </div>
\t
\t \t <div class="pin">
\t \t \t <img src="http://cssdeck.com/uploads/media/items/6/6f3nXse.png" />
\t \t \t <p>
\t \t \t \t Lorem ipsum dolor sit amet, consectetur adipiscing elit.
\t \t \t \t Sed feugiat consectetur pellentesque. Nam ac elit risus,
\t \t \t \t ac blandit dui. Duis rutrum porta tortor ut convallis.
\t \t \t </p>
<div class="toggleDisplay">
<button>Click 15</button>
<div class="display_none">
<p>Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae. Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae. Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae.</p>
</div>
</div>
\t \t </div>
\t </div>
</div>
它仍然重新排序的箱子，如果他們延長以往任何盒子的底部到它的左邊或右邊。如果您將副本添加到顯示/隱藏中，您會看到我的意思...... –