Question

我的父div（nav）是1000px。其中有一个子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设置为特定宽度（这使得它对于一列来说太大），它会为自己指定一个任意宽度，并且我的所有列都被按下并且看起来很糟糕。 / p>

我从这里尝试了一些其他相关问题的解决方案，但到目前为止还没有任何工作。

我的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;
}

非常感谢任何帮助或想法，谢谢。：）

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

Answer 1

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

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

Answer 2

将display: inline-block;添加到.nav-drop-panel seemed to do the trick;我还略微缩小了打印代码（margin-left，margin-top等缩减为margin: etc etc etc etc;）。要查看您的未更改但工作正常（如添加了display: inline-block;）版本，请点击here。

我的DIV宽度没有随着孩子的大小而扩大

2 个答案: