0

1000pxの親div（nav）があります。その中に子div（nav-drop-panel）があり、その中に他の子（drop-panel-col）があります。基本的に、drop-panel-colはナビゲーション内のリンクのリストです。特定の高さがあるため、別の列を追加する前に追加できるリンクは非常に多くなります（したがって、nav-drop-panel内に1〜4個のdrop-panel-col divがあります）。

nav-drop-panel divのサイズを、その中の列の数に応じて変更したいと思います。したがって、1つしかない場合は、4つある場合よりも小さくなります。親div（nav）の1000pxの幅を超えることはなく、近づくこともありません。何らかの理由で、nav-drop-panelを特定の幅に設定しないと（1つの列には大きすぎる）、任意の幅が割り当てられ、すべての列が押し下げられてひどく見えます。

ここから他の関連する質問に対するいくつかの解決策を試しましたが、これまでのところ何も機能していません。

私の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 に答える