css和javascript对齐问题.这在css中甚至可能吗？

Question

我有一个相当困难的问题,我坚持认为如果使用CSS甚至可以实现这一点,我将不胜感激.我有6个div,1-3个需要在左栏中,4-6个在右栏中.当您单击任何div时,它们使用jquery hide()隐藏.我发现困难的部分是当你删除一个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需要从左列移动到第一列中的最后一个点.

Answer 1

你可以使用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>

Answer 2

使用CSS列并删除子项的float属性:

#container {
  /* ... */
  -webkit-column-count: 2; /* Chrome, Safari, Opera */
  -moz-column-count: 2;  /* Firefox */
  column-count: 2;
  height: 300px;
}

此外,为防止您的盒子在列之间分裂(在此处找到):

.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+ */
}

JS小提琴演示