2011-06-20 20 views
6

Chciałbym element, aby wypełnić pozostałą przestrzeń div jednostki dominującej. Udało mi się to zrobić, możesz to zobaczyć tutaj "link usunięty", ale div wypełniający (po prawej) znajduje się pod lewym div. Zasadniczo chcę, aby prawy div zaczął się tam, gdzie kończy się lewy div.Wypełnij przestrzeń div

Mam nadzieję, że to ma sens.

<html> 
    <head> 
    <title></title> 
    <style type="text/css"> 
    #left { 
     float:left; 
     width:180px; 
     background-color:#ff0000; 
     height:20px; 
    } 
    #right { 
     width: 100%; 
     background-color:#00FF00; 
     height:30px; 
    } 
    </style> 
    </head> 

    <body> 
    <div> 
    <div id="left">Nav</div> 
    <div id="right">This is the space I need to fill but not go underneath the nav div</div> 
    </div> 
    </body> 
    </html> 
+0

dodawania pływaka: prawo do #right –

+0

Nie sądzę, że jest możliwe, aby wypełnić tę przestrzeń o szerokości 100%. Jedynym sposobem na uzyskanie odpowiedniego div, aby nie przejść pod lewym divem, jest unoszenie prawego div, ale kiedy to zrobisz, szerokość 100% spowoduje przejście do następnej linii. Jeśli usuniesz szerokość 100%, ładnie się układa obok lewego elementu div, ale nie wypełnia się całkowicie. Być może będziesz musiał ponownie ocenić swoje podejście, byłoby mi łatwiej, gdybym wiedział, co próbujesz osiągnąć, abym mógł oferować alternatywne rozwiązania. – Zoidberg

Odpowiedz

12

Na #right, wystarczy usunąć width: 100% i dodać overflow: hidden.

Patrz:http://jsfiddle.net/hJzJf/ - (jestem zakładając twoi height s są tylko w celach testowych)

Dlaczego to działa?

Patrz: http://colinaarts.com/articles/the-magic-of-overflow-hidden/#making-room-for-floats

+0

Nie miałem pojęcia o tej sztuczce, świetny link! – Kyle

+0

Nigdy o tym nie wiedziałem. Ucz się czegoś nowego każdego dnia. +1 – Till

+0

+1 świetna sztuczka :) – sandeep

3

Ustaw margin-left: 180px; na elemencie #right. Spowoduje to przesunięcie o szerokość pierwszego elementu.

http://jsfiddle.net/DHSej/

+0

To spowoduje przesunięcie o 180 pikseli wartości #right z widocznego obszaru, co może, ale nie musi, być w interesie Mitcha – Till

+0

Leg-End! Nie mogę uwierzyć, że przeoczyłem to. Niezłe. – Mitch

Powiązane problemy