css - 站点地图的浮动 div 请看图片

Question

这就是我所拥有的：

这就是我要的

我怎样才能做到这一点？

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

当然还有一个小提琴http://jsfiddle.net/caramba/rYkxQ/

谢谢你的帮助！

Answer 1

您可以尝试只制作带有几个块的树导航 div。这段代码对我有用（当然最好做细分）：

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