复选框列表，按自上而下的列按字母顺序排列

Question

我正在尝试显示我的复选框列表，以便字母顺序是垂直的而不是水平的。显然，当小提琴中的容器被拖动到单列宽度时，情况会很好，但是从2列开始，复选框顺序水平运行。我似乎无法应用任何以前的相关帖子（使用display：block，float：left等），但没有任何作用，它正在我的头！任何帮助非常感谢。小提琴：http://jsfiddle.net/rub5rc8x/

http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js

<div class="CountryListBoxClass_prodn">
  <label class="myEuropeCountries">
    <input type="checkbox" id="UN40" value="Austria" />Austria</label>
  <label class="myEuropeCountries">
    <input type="checkbox" id="UN100" value="Bulgaria" />Bulgaria</label>
  <label class="myEuropeCountries">
    <input type="checkbox" id="UN191" value="Croatia" />Croatia</label>
  <label class="myEuropeCountries">
    <input type="checkbox" id="UN208" value="Denmark" />Denmark</label>
  <label class="myEuropeCountries">
    <input type="checkbox" id="UN233" value="Estonia" />Estonia</label>
 <label class="myEuropeCountries">
    <input type="checkbox" id="UN276" value="Germany" />Germany</label>
 <label class="myEuropeCountries">
    <input type="checkbox" id="UN348" value="Hungary" />Hungary</label>
 <label class="myEuropeCountries">
    <input type="checkbox" id="UN372" value="Ireland" />Ireland</label>
 <label class="myEuropeCountries">
    <input type="checkbox" id="UN428" value="Latvia" />Latvia</label>
 <label class="myEuropeCountries">
    <input type="checkbox" id="UN470" value="Malta" />Malta</label>
</div>

.CountryListBoxClass_prodn label {
  display: inline-block;
  border: 1px solid transparent;
  width: 213px;
  background-color: white;
  margin: 0px 7px 2px 0px;
}

.CountryListBoxClass_prodn input {
  position: relative;
  vertical-align: middle;
  bottom: 1px;
  margin-right: 10px;
}

.CountryListBoxClass_prodn {
  border: 1px solid #ebebeb;
  Padding: 10px 0px 0px 5px;
  background-color: #fcfcfc;
  overflow-y: scroll;
  font-family: "Verdana";
  font-size: 11px;
}

Answer 1

你可以使用 flex css，它们的顺序可以通过一些jQuery逻辑设置，如下所示

var n = $('.myEuropeCountries').length;
for (i = 1; i <= (n / 2).toFixed(); i++) {
  $('.myEuropeCountries:nth-child(' + i + ')').css('order', (2 * i - 1))
}
for (i = (n / 2 + 1).toFixed(); i <= n; i++) {
  $('.myEuropeCountries:nth-child(' + i + ')').css('order', (2 * i - n - (n % 2)))
}

* {
  box-sizing: border-box;
}

.CountryListBoxClass_prodn label {
  border: 1px solid transparent;
  width: 49%;
  background-color: white;
  margin: 0.5%;
}

.CountryListBoxClass_prodn input {
  position: relative;
  vertical-align: middle;
  bottom: 1px;
  margin-right: 10px;
}

.CountryListBoxClass_prodn {
  border: 1px solid #ebebeb;
  padding: 10px;
  background-color: #fcfcfc;
  display: flex;
  flex-wrap: wrap;
  font-family: "Verdana";
  font-size: 11px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="CountryListBoxClass_prodn">
  <label class="myEuropeCountries">
    <input type="checkbox" id="UN40" value="Austria" />Austria</label>
  <label class="myEuropeCountries">
    <input type="checkbox" id="UN100" value="Bulgaria" />Bulgaria</label>
  <label class="myEuropeCountries">
    <input type="checkbox" id="UN191" value="Croatia" />Croatia</label>
  <label class="myEuropeCountries">
    <input type="checkbox" id="UN208" value="Denmark" />Denmark</label>
  <label class="myEuropeCountries">
    <input type="checkbox" id="UN233" value="Estonia" />Estonia</label>
  <label class="myEuropeCountries">
    <input type="checkbox" id="UN276" value="Germany" />Germany</label>
  <label class="myEuropeCountries">
    <input type="checkbox" id="UN348" value="Hungary" />Hungary</label>
  <label class="myEuropeCountries">
    <input type="checkbox" id="UN372" value="Ireland" />Ireland</label>
  <label class="myEuropeCountries">
    <input type="checkbox" id="UN428" value="Latvia" />Latvia</label>
  <label class="myEuropeCountries">
    <input type="checkbox" id="UN470" value="Malta" />Malta</label>
</div>