0

我有一个 1000px 的父 div（导航）。其中有一个子 div (nav-drop-panel)，并且在其中有另一个子 (drop-panel-col)。基本上，drop-panel-col 是导航中的链接列表。由于有一个特定的高度，我只能在添加另一列之前添加这么多链接（所以在 nav-drop-panel 中有 1-4 个 drop-panel-col div）。

我希望 nav-drop-panel div 根据其中的列数自行调整大小。因此，如果只有一个，它会比有 4 个小。它永远不会超过甚至接近其父 div (nav) 的 1000px 宽度。出于某种原因，如果我没有将 nav-drop-panel 设置为特定宽度（这使得它对于一列来说太大了），它会为自己分配一个任意宽度，并且我的所有列都被向下推，看起来很糟糕。

我已经尝试了一些其他相关问题的解决方案，但到目前为止没有任何效果。

我的 HTML：

<div class="nav-drop-panel">
    <div class="drop-panel-col">
        <a class="cat">Vehicle Graphics</a>
        <a href="/info_truck_graphics.php">Pick-Up Truck</a>
        <a href="/info_van_lettering.php">Van</a>
        <a href="/info_trailer_graphics.php">Enclosed Trailer</a>
        <a href="/info_commercial_truck_graphics.php">Box Truck</a>
        <a href="/info_suv_graphics.php">SUV</a>
        <a href="/car-lettering.php">Car</a>
        <a href="/info_boat_graphics.php">Boat</a>
        <a href="/info_bus_graphics.php">Bus</a>
        <a href="/custom-signs/magnetic-car-signs-vehicle-magnet-sign/">ScratchGuard&#153; Magnets</a>
        <a href="/info_vinyl_Letters.php">Vinyl Lettering and Graphics</a>
        <p></p>     
    </div>
</div>

我的 CSS：

#nav {
    padding: 0;
    margin: 0;
    list-style: none;
    width: 1000px;
    z-index: 15;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    /* position: absolute;
    left: 0px;
    top: 0px; */
}
#nav .nav-drop-panel {
    background-color: #FFFFFF;
    border-bottom: 3px solid #BBBBBB;
    border-bottom-right-radius: 10px;
    border-right: 3px solid #BBBBBB;
    height: 431px;
    margin-bottom: 0;
    padding-bottom: 7px;
    padding-top: 19px;
    /* position: absolute;
    top: -5px;
    left: 218px; */
}

#nav .drop-panel-col {
    color: #333333;
    float: left;
    font-family: Arial;
    font-size: 14px;
    padding-left: 24px;
}

#nav .drop-panel-col a{
    color: #333333;
    display: block;
    font-weight: bold;
    height: 19px;
    margin-bottom: 5px;
    margin-left: -4px;
    padding-left: 30px;
    padding-top: 0;
    width: 202px;
}

非常感谢任何帮助或想法，谢谢。:)

编辑：只是显示我做了什么来删除定位。我刚刚评论了它，看看它是否至少会扩展，并从那里开始工作。

4

2 回答 2

1

绝对定位的元素不再是布局的一部分。父元素不知道它们在哪里或有多大。

您需要使用 JavaScript 来计算所有这些并相应地调整父级的大小......或者使用不使用绝对定位的布局。

于 2012-05-18T18:49:48.647 回答
0

添加display: inline-block;到 .nav-drop-panel似乎可以解决问题；我还稍微减少了打印代码（margin-left，，margin-top等减少到margin: etc etc etc etc;）。要查看您未更改但可以正常工作的版本（就像display: inline-block;添加的版本一样），请单击此处。

于 2012-05-18T20:36:50.613 回答