在我的用户界面中,如果同时选中了某个区域及其国家/地区复选框,则可以在右侧看到该区域及其所在国家/地区.如果仅选中国家/地区复选框,则会将相关国家/地区放入“未组合国家/地区”框中.见小提琴：
http://jsfiddle.net/m92hfs0b/

我试图将国家/地区显示为最多3列,无论它们是否为
显示在他们的区域下,或者是否显示在“未组织的国家/地区”框中.
国家订单需要从左到右.我尝试过使用这里的许多帖子提供的建议,包括内联块,CSS列等,但每个帖子似乎都停止了’display：none’,而’visibility：hidden’也没有解决任何问题.
任何帮助真的很感激.

// This opens up each of the regional sections, and at the end of the function it resorts the data for the 'Ungrouped countries' section.

$(function() {
  $('input[type="checkbox"]').click(function() {
    if ($(this).attr("value") == "RegionEurope") {
      $(".TextRegionEuroClass, .ContainerEuroClass").slideToggle(0)

      var targetBox = $(this).prop("checked") ? '.ContainerEuroClass' : '.CountryRHWrapperClass'
      $('.myEuropeCountries').appendTo($(targetBox))
    }

    if ($(this).attr("value") == "RegionNAM") {
      $(".TextRegionNAMClass, .ContainerNAMClass").slideToggle(0)
      var targetBox = $(this).prop("checked") ? '.ContainerNAMClass' : '.CountryRHWrapperClass'
      $('.myNAMCountries').appendTo($(targetBox))
    }
  });
});

function sortByText(a, b) {
  return $.trim($(a).text()) > $.trim($(b).text()) ? 1 : -1;
}

// Pre-sort all the countries under mywrapper div (still keeping them hidden)
var li = $(".CountryRHWrapperClass").children("label").detach().sort(sortByText)
$(".CountryRHWrapperClass").append(li)

// On-click handler will just toggle display, countries already sorted
$('input[type="checkbox"]').click(function() {
  $('.my' + $(this).attr("id")).slideToggle(0)
})

.TopHeader {
  border: 1px solid green;
  height: 50px;
  font-size: 20px;
}

.LHContainerClass {
  float: left;
  height: 200px;
  width: 300px;
  font-family: Arial font-size: 12px;
  border: 1px solid blue;
}

.RHContainerClass {
  margin-left: 305px;
  height: 200px;
  font-family: "Verdana", Arial, serif;
  font-size: 11px;
  margin-right: 10px;
  border: 1px solid pink;
}

.FourShapeRectangleClass {
  width: 100px;
  height: 50px;
  margin: 1px;
  border: 1px solid black;
  float: left;
  white-space: wrap;
}


/* -------------------------------------------------- */

#DivForLHRegionsHeaderID {
  height: 30px;
  white-space: wrap;
  border: 1px solid green;
  font-size: 15px;
  font-weight: bold;
}

#DivForLHCountriesHeaderID {
  height: 30px;
  white-space: wrap;
  border: 1px solid green;
  font-size: 15px;
  font-weight: bold;
}

#DivForLHRegionLabelsID {
  border: 1px solid green;
  line-height: 160%;
}


/* ---------------------------------------------------------- */

.CountryRHWrapperClass {
  margin-top: 30px;
  border: 1px solid brown;
}

.HeaderUngroupedCountriesClass {
  font-size: 12px;
  font-weight: bold;
}


/* ---------------------------------------------------------- */

.ContainerEuroClass {
  display: none;
  border: 1px solid blue;
}

.TextRegionEuroClass {
  display: none;
  font-size: 12px;
  font-weight: bold;
  padding: 2px 0px 6px 3px;
  background: yellow;
}

.myEuropeCountries {
  display: none;
  width: 150px;
}


/* ---------------------------------------------- */

.ContainerNAMClass {
  display: none;
  border: 1px solid blue;
}

.TextRegionNAMClass {
  display: none;
  font-size: 12px;
  font-weight: bold;
  padding: 2px 0px 6px 3px;
  background: yellow;
}

.myNAMCountries {
  display: none;
  width: 150px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="TopHeader">
  <label>Region and Country Selector</label>
</div>
<div id="LHContainerID" Class="LHContainerClass">
  <div id="DivForLHRegionsHeaderID" class="FourShapeRectangleClass">
    <label>Region</label>
  </div>
  <div id="DivForLHCountriesHeaderID" class="FourShapeRectangleClass">
    <label>Countries</label>
  </div>
  <div style='clear:both'></div>
  <div id="DivForLHRegionsCheckboxesID" class="FourShapeRectangleClass">
    <label><input type="checkbox" value="RegionEurope" />Region EU</label>
    <label><input type="checkbox" value="RegionNAM" />RegionNA</label>
  </div>
  <div id="DivForLHCountriesCheckboxesID" class="FourShapeRectangleClass">
    <label><input type="checkbox" id="EuropeCountries" />Country EU</label>
    <label><input type="checkbox" id="NAMCountries" />Country NA</label>
  </div>
</div>
<div id="RHContainerID" class="RHContainerClass">
  <div class="ContainerEuroClass">
    <div class="TextRegionEuroClass">Europe</div>
  </div>
  <div class="ContainerNAMClass">
    <div class="TextRegionNAMClass">North America</div>
  </div>
  <div class="CountryRHWrapperClass">
    <div class="HeaderUngroupedCountriesClass">Ungrouped countries</div>
    <label class="myEuropeCountries"><input type="checkbox" value="Spain" />Spain</label>
    <label class="myEuropeCountries"><input type="checkbox" value="Germany" />Germany</label>
    <label class="myEuropeCountries"><input type="checkbox" value="Austria" />Austria</label>
    <label class="myEuropeCountries"><input type="checkbox" value="France" />France</label>
    <label class="myEuropeCountries"><input type="checkbox" value="Switzerland" />Switzerland</label>
    <label class="myEuropeCountries"><input type="checkbox" value="Poland" />Poland</label>
    <label class="myNAMCountries"><input type="checkbox" value="Canada" />Canada</label>
    <label class="myNAMCountries"><input type="checkbox" value="Mexico" />Mexico</label>
    <label class="myNAMCountries"><input type="checkbox" value="USA" />USA</label>
    <label class="myNAMCountries"><input type="checkbox" value="Cuba" />Cuba</label>
    <label class="myNAMCountries"><input type="checkbox" value="Puerto Rico" />Puerto Rico</label>
    <label class="myNAMCountries"><input type="checkbox" value="Panama" />Panama</label>
    <label class="myNAMCountries"><input type="checkbox" value="Grenada" />Grenada</label>
  </div>
</div>

最佳答案 使用这两种样式

    .myEuropeCountries:nth-child(3n):after {
        content: '\A';
        white-space:pre;
    }

    .myNAMCountries:nth-child(3n):after {
        content: '\A';
        white-space:pre;
    }