0
부모 div (nav)의 크기가 1000px입니다. 그 안에는 하위 div (nav-drop-panel)와 그 다른 자식 (drop-panel-col)이 있습니다. 기본적으로 drop-panel-col은 탐색의 링크 목록입니다. 특정 높이가 있기 때문에 다른 열을 추가하기 전에 너무 많은 링크 만 추가 할 수 있습니다 (따라서 nav-drop-panel 내에서 1-4 개의 drop-panel-col div가 있습니다).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™ 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;
}
는 크게 어떤 도움이나 아이디어, 감사를 주셔서 감사합니다. :)
편집 : 위치를 제거하기 위해 수행 한 작업을 보여줍니다. 나는 적어도 그것이 확장되고 거기에서 일할 것인지를보기 위해 그것을 주석 처리했다.
아마도 다른 사람들이이 사실을 박쥐에서 더 잘 이해할 것입니다.하지만 나를 위해 jsfiddle을 설정하면 문제를 이해하는 데 도움이 될 것입니다. – Chords
@anubis, 내가 당신에게 내 대답을 준 이후로 몇 주를 보냈습니다. 당신이 필요로하는 것을하지 않았습니까? – Daedalus