Css 站点地图浮动div请看图片

这就是我所拥有的：

这就是我想要的

我该怎么做

<style type="text/css">
    .sitemap {
        width:560px;
    }
    .sitemap .nav-box {
        float:left;
        width:170px;
        margin-right:15px;
        margin-bottom:20px;
    }
    .sitemap .nav-box span,
    .sitemap .nav-box a {
        display:block;
        border-bottom:1px solid #434343;
    }
    .sitemap .nav-box span {
        color:gray;
        font-size:14px;
        text-transform:uppercase;
        border-bottom:1px solid #434343;
        line-height:20px;
        padding-bottom:3px;
    }
    .sitemap .nav-box a {
        padding:3px 0;
    }
</style>



<div class="sitemap">
    <h3>Sitemap</h3>
    <div class="nav-box">
        <span>Hotels & Apartments</span>
        <a href="#">Alle Hotels</a>
        <a href="#">5 *****</a>
        <a href="#">4 ****</a>
        <a href="#">3 ***</a>
        <a href="#">2 **</a>
        <a href="#">Apartments</a>
    </div>
    <div class="nav-box">
        <span>Ferien-Wohnungen</span>
        <a href="#">Mieten</a>
        <a href="#">Kaufen</a>
    </div>
    <div class="nav-box">
        <span>Dining & Nightlife</span>
        <a href="#">Gault Millau</a>
        <a href="#">Walliser Spezialitäten</a>
        <a href="#">Pasta & Pizza</a>
        <a href="#">Asian</a>
        <a href="#">Bergrestaurant</a>
        <a href="#">Caffe & Bars</a>
        <a href="#">Clubs & Après Ski</a>

    </div>
    <div class="nav-box">
        <span>Shopping & Lifestyle</span>
        <a href="#">Bijouterie</a>
        <a href="#">Fashion</a>
        <a href="#">Sportgeschäfte</a>
        <a href="#">Food & Beverage</a>
        <a href="#">Apotheken</a>
        <a href="#">Spa & Wellness</a>
        <a href="#">Massagen</a>
    </div>
    <div class="nav-box">
        <span>Sports & Adventures</span>
        <a href="#">Skipisten (Pistenbericht)</a>
        <a href="#">Ski & Snowboard-Schulen</a>
        <a href="#">Ski & Bergtouren</a>
        <a href="#">Heliskiing</a>
        <a href="#">Paragliding</a>
        <a href="#">Indoor Klettern</a>
        <a href="#">Curling</a>
    </div>
    <div class="nav-box">
        <span>Kultur & Events</span>
        <a href="#">Kulturelles</a>
        <a href="#">Eventkalender</a>
    </div>
    <div class="clear"></div>
</div>

.网站地图{
宽度：560px；
}
.站点地图.导航框{
浮动：左；
宽度：170px；
右边距：15px；
边缘底部：20px；
}
.站点地图.导航框跨度，
.站点地图.导航框a{
显示：块；
边框底部：1px实心#434343；
}
.站点地图.导航框跨度{
颜色：灰色；
字体大小：14px；
文本转换：大写；
边框底部：1px实心#434343；
线高：20px；
垫底：3件；
}
.站点地图.导航框a{
填充：3px0；
}
网站地图
酒店及公寓
费里安·沃农根
餐饮与夜生活
购物与生活方式
运动与冒险
文化与事件

当然还有小提琴

---

谢谢你的帮助

您可以尝试只制作内部有几个块的树导航div。这段代码对我很有用（当然最好是使用subdiv）：

网站地图
酒店及公寓
购物与生活方式
费里安·沃农根
运动与冒险
餐饮与夜生活
文化与事件

---

您考虑过使用jQuery吗？您可以尝试将列拆分为真正的列tbh。[divleft][divmid][divright]并用方框填充，谢谢回答。首先我想不，不，不！但现在我明白了，我应该去睡觉了：-）非常感谢凯菊

<div class="sitemap">
<h3>Sitemap</h3>
<div class="nav-box">
    <span>Hotels & Apartments</span>
    <a href="#">Alle Hotels</a>
    <a href="#">5 *****</a>
    <a href="#">4 ****</a>
    <a href="#">3 ***</a>
    <a href="#">2 **</a>
    <a href="#">Apartments</a>
    <span>Shopping & Lifestyle</span>
    <a href="#">Bijouterie</a>
    <a href="#">Fashion</a>
    <a href="#">Sportgeschäfte</a>
    <a href="#">Food & Beverage</a>
    <a href="#">Apotheken</a>
    <a href="#">Spa & Wellness</a>
    <a href="#">Massagen</a>
</div>
<div class="nav-box">
    <span>Ferien-Wohnungen</span>
    <a href="#">Mieten</a>
    <a href="#">Kaufen</a>
    <span>Sports & Adventures</span>
    <a href="#">Skipisten (Pistenbericht)</a>
    <a href="#">Ski & Snowboard-Schulen</a>
    <a href="#">Ski & Bergtouren</a>
    <a href="#">Heliskiing</a>
    <a href="#">Paragliding</a>
    <a href="#">Indoor Klettern</a>
    <a href="#">Curling</a>
</div>
<div class="nav-box">
    <span>Dining & Nightlife</span>
    <a href="#">Gault Millau</a>
    <a href="#">Walliser Spezialitäten</a>
    <a href="#">Pasta & Pizza</a>
    <a href="#">Asian</a>
    <a href="#">Bergrestaurant</a>
    <a href="#">Caffe & Bars</a>
    <a href="#">Clubs & Après Ski</a>
    <span>Kultur & Events</span>
    <a href="#">Kulturelles</a>
    <a href="#">Eventkalender</a>

</div>
<div class="clear"></div>