1

3 列表示に問題があります。2 つの列の間に空白があります。言葉で説明するのは難しいので、画面は次のとおりです。

ここに画像の説明を入力

各大きなカテゴリ (掘削機、ローダーなど) は 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;
}

ここに私が欲しいものがあります:

ここに画像の説明を入力

良い１日を

4

1 に答える 1

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>
于 2013-02-19T10:29:07.917 に答える