2014-04-09 68 views
-1

我有一堆浮動的div,我想分佈在2列系統中。 問題在於在框之間的左側列中生成了太多的垂直空間。浮動div更加緊密

該divs都在一個大容器,所以它實際上不是2列,標記明智。

有人可以告訴我如何保持箱子之間的緊密性並仍然遵守字母順序的曲折形式嗎?

<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> 
+0

你外側容器固定高度?共享CSS代碼太.. –

+1

我期望這是由於你如何使用clear屬性,但很難說沒有CSS。 – advert2013

回答

1

您可以擺脫間距的唯一方法是使用2個包裝。一個左邊和右邊的包裝,每個包含您需要的標籤框。

標籤盒在父母身上會相互浮動,不會產生額外的空間。

0

這裏發生的事情是根據右欄內容左欄還擴大。因此將其分成2個不同的列,並將您的內容放在那裏。

HTML:

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

不幸的是,這將破壞字母順序 – silkfire