html - 三列html的问题

Question

我有一个三列显示的问题。我在两列之间有空格。很难用语言来解释，所以这里是一个屏幕：

每个大类（挖掘机、装载机……）都是 UL。float:left 我想删除装载机和平地机之间或刮板机和伸缩叉车之间的空白区域...

这是生成的 HTML

<div class="right_list">
                <ul class="group_list">
        <li><a class="titre_cat" href="xxx" title="Excavators">Excavators (588)</a></li>

                                            <li><a class="sous_cat" href="xxx" title="Dragline Excavators ">Dragline Excavators  (1)</a></li>
                                <li><a class="sous_cat" href="xxx" title="Track excavators ">Track excavators  (239)</a></li>
                                <li><a class="sous_cat" href="xxx" title="Wheel excavator">Wheel excavator (111)</a></li>
                                <li><a class="sous_cat" href="xxx" title="Industrial excavators">Industrial excavators (3)</a></li>
                                <li><a class="sous_cat" href="xxx" title="Excavators accesories">Excavators accesories (13)</a></li>
                                <li><a class="sous_cat" href="xxx" title="Mini digger ">Mini digger  (221)</a></li>
                                </ul>
[... and more and more ...]
</div> 

这是应用的CSS：

.right_list {
    float: left;
    margin: 0 0 0 7px;
    width: 756px;
}

.group_list {
    float: left;
    margin: 0 10px 5px 0;
    width: 242px;
}

这是我想要的：

祝你今天过得愉快

Answer 1

尝试先创建 3 列，然后将 div 放入这些列中。列本身也应该是div.

<div class="col">
  <div class="right_list"></div>
  <div class="right_list"></div>
  <div class="right_list"></div>
</div>
<div class="col">
  <div class="right_list"></div>
  <div class="right_list"></div>
  <div class="right_list"></div>
</div>
<div class="col">
  <div class="right_list"></div>
  <div class="right_list"></div>
  <div class="right_list"></div>
</div>