Question

我有一堆浮动的div，我想在2列系统中分发。问题是在框之间的左栏中产生了太多的垂直空间。

div都在一个大容器中，所以它实际上不是2列，标记方式。

有人可以告诉我如何保持盒子之间的紧密度并仍然遵循按字母顺序排列的Z字形顺序吗？

<div class="tag-box">
   <div class="heading">
      <input type="checkbox" data-field="county">
      <span class="heading">Blekinge</span>
   </div>

   <div class="tag-group ui-helper-clearfix">
      <div>
         <input type="checkbox" value="23" data-field="br">
         <div class="tag">
            <div>23</div>Karlshamn</div>
         </div>
      <div>

      <input type="checkbox" value="22" data-field="br">
      <div class="tag">
         <div>22</div>Karlskrona</div>
      </div>
   </div>
</div>

Answer 1

你可以摆脱间距的唯一方法是使用2个包装器。左侧和右侧包装器，每个包装器都包含您需要的标签盒。

标签框将在父母内部相互浮动，不会产生额外的空间。

Answer 2

这里发生的事情是根据右列内容你的左栏也扩展了。因此，将其拆分为2个不同的列，并将您的内容放在那里。

<强> HTML：

<div class="container">
<div class="left-col"> .. your content goes here.. </div>
<div class="right-col"> .. your content goes here.. </div>
</div>

浮动div更紧密

2 个答案: