css & javascript对齐问题。这在css中是可能的吗？
css & javascript对齐问题。这在css中是可能的吗？
提问于 2015-03-31 20:47:27
我有一个相当困难的问题，我被困在上面，我希望能有一些洞察力，如果这是可能的CSS。我有6个div，1-3需要在左列，4-6在右列。单击任何div时，它们都会使用jquery ()进行隐藏。我发现困难的部分是当您移除一个div时，我需要它们以一种特定的方式重新排序。请参阅所附的订购/再订购的图片。看看我的小提琴，看看我的进步，谢谢你的帮助。
https://jsfiddle.net/m44pzvz4/
<div id="container">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
</div>
因此，您可以看到，如果任何1-3 div被移除，4-6中的div需要从左列移动到第一列中的最后一个点。
回答 2
Stack Overflow用户
回答已采纳
发布于 2015-03-31 20:54:29
您可以使用flex-flow: column wrap
$(".item").each(function() {
$(this).on("click", function() {
$(this).hide()
});
});
$("button").each(function(index) {
$(this).on("click", function() {
$('#' + (index + 1)).toggle();
});
});.container {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: column wrap;
flex-flow: column wrap;
width: 100px;
height: 150px;
}
.item {
width: 50px;
height: 50px;
border: 1px;
line-height: 50px;
text-align: center;
}
.r { background-color: #bf616a; }
.o { background-color: #d08770; }
.y { background-color: #ebcb8b; }
.g { background-color: #a3be8c; }
.b { background-color: #96b5b4; }
.v { background-color: #8fa1b3; }
.layout {
display: -webkit-flex;
display: flex;
width: 400px;
-webkit-justify-content: space-around;
justify-content: space-around;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="layout">
<div class="container">
<div id='1' class="item r">1</div>
<div id='2' class="item o">2</div>
<div id='3' class="item y">3</div>
<div id='4' class="item g">4</div>
<div id='5' class="item b">5</div>
<div id='6' class="item v">6</div>
</div>
<div>
Toggles:
<div>1
<button>toggle</button>
</div>
<div>2
<button>toggle</button>
</div>
<div>3
<button>toggle</button>
</div>
<div>4
<button>toggle</button>
</div>
<div>5
<button>toggle</button>
</div>
<div>6
<button>toggle</button>
</div>
</div>
</div>
Stack Overflow用户
发布于 2015-03-31 20:53:01
使用CSS列并删除您的子元素的float属性：
#container {
/* ... */
-webkit-column-count: 2; /* Chrome, Safari, Opera */
-moz-column-count: 2; /* Firefox */
column-count: 2;
height: 300px;
}此外，为了防止您的框在列之间拆分(找到here)：
.child {
/* ... */
-webkit-column-break-inside: avoid; /* Chrome, Safari */
page-break-inside: avoid; /* Theoretically FF 20+ */
break-inside: avoid-column; /* IE 11 */
display:table; /* Actually FF 20+ */
}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/29378259
复制相关文章
相似问题
腾讯云开发者
