如果内容超出第一个 div，如何将内容添加到下一个 div答案

【问题标题】：how to add content to next div if its exceeding in the first div如果内容超出第一个 div，如何将内容添加到下一个 div
【发布时间】：2017-01-31 22:04:45
【问题描述】：

我想在一个 div 中添加 5 个类别。目前，我将所有内容都集中在一个 div 中。在添加更多类别时，我希望它们显示在下一个 div 中。任何人都可以帮助我如何做到这一点。这是我想要达到的目标

我知道我可以在 col-md-12 中创建 col-md-4 * 3 但我仍然会在第一个 div 中获得所有类别。

<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#jobsByindustry"><b>Jobs By Industry</b></a></li>
  <li><a data-toggle="tab" href="#jobsByCity"><b>Jobs By city</b></a></li>
  <li><a data-toggle="tab" href="#jobsByCompany"><b>Jobs By company</b></a></li>

</ul>

<div class="tab-content">
  <div id="jobsByindustry" class="tab-pane fade in active">
    <div class=" col-md-12 jobsByCategory">
          <?php if (isset($industries)): ?>
          <?php foreach ($industries as $industry): ?>  
           <a href="<?php echo base_url() ;?>job/jobsbyindustry/<?php echo $industry->industry_id; ?>"><?php echo $industry->industry_name; ?></a><br>
          <?php endforeach ?>
          <?php endif ?>
      </div>
  </div>

  <div id="jobsByCity" class="tab-pane fade">
    <div class="col-md-12 jobsByCategory">
          <?php if (isset($cities)): ?>
          <?php foreach ($cities as $city):

           ?>  
           <a href="<?php echo base_url() ;?>job/jobsbyindustry/<?php echo $city->city_id; ?>"><?php echo $city->city_name; ?></a><br>
          <?php endforeach ?>
          <?php endif ?>
      </div>
  </div>

  <div id="jobsByCompany" class="tab-pane fade">
      <div class=" col-md-12 jobsByCategory">
            <?php if (isset($companies)): ?>
            <?php foreach ($companies as $company): ?>  
             <a href="<?php echo base_url() ;?>job/jobsbyindustry/<?php echo $company->company_id; ?>"><?php echo $company->company_name; ?></a><br>
            <?php endforeach ?>
            <?php endif ?>
        </div>
  </div>
</div>

【问题讨论】：

div 元素是“块级”元素。也就是说，它们在任何先前内容下方的下一行呈现。要让它们彼此相邻显示，您可以考虑在针对相关 div 元素的 CSS 规则中使用 float:left。
你正在使用它出现的引导程序，你可能想要一个包含三个 col-md-4 而不是 col-md-12 的 row-fluid
正如@Kisaragi 所说，bootstrap 提供了一个网格系统。每行是 12 宽，12/3 是 4 宽，这就是 col-**-4 的来源。 md 与屏幕尺寸有关。这也是它对您的 atm 不起作用的原因，12 占据了整个宽度。或许也可以看看flexbox。
我知道我可以在 col-md-12 中创建 col-md-4 * 3 但我仍然会在第一个 div 中获得所有类别。

标签： javascript php jquery codeigniter codeigniter-3

【解决方案1】：

jquery 模型如下。这是基于具有相同类名的三列。它循环遍历第一列并将列表项相应地插入下一列和后续列。小提琴中注释的步骤和 css 需要根据您的情况进行调整。

var cats = $('.cols').eq(0).find('li'),
  num = 5;

cats.each(function(i) { // cycle through each li
  if (i >= num) { // start after num counts
    var temp = $(this),
      count = Math.floor(i / num); // work out the multiples
    $('.cols').eq(count).append(temp[0].outerHTML); // add this li to the next eligable column
    temp.remove(); // remove it from the first list
  }
});

.cols {
  display: inline-block;
  width: 25%;
  padding-left: 5%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<ul id="one" class="cols">
  <li>some text</li>
  <li>some text</li>
  <li>some text</li>
  <li>some text</li>
  <li>some text</li>
  <li>some text</li>
  <li>some text</li>
  <li>some text</li>
  <li>some text</li>
  <li>some text</li>
  <li>some text</li>
  <li>some text</li>
</ul>

<ul id="two" class="cols">

</ul>

<ul id="three" class="cols">

</ul>

【讨论】：