css - 站点地图的 float 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>

当然还有 fiddle http://jsfiddle.net/caramba/rYkxQ/

感谢您的帮助!

Answer 1

您可以尝试只制作内部有几个 block 的树状 nav-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>