Praca z DIV i CSS

Question

OK, jeśli ktokolwiek mógłby mi w tym pomóc, byłbym bardzo wdzięczny. Jeśli skopiuj i wklej następujący i otworzyć w IE lub Firefox

<div style="border: solid 1px navy; float: left;"> 
    <ul> 
     <li>Item 1</li> 
     <li>Item 2</li> 
     <li>Item 3</li> 
     <li>Item 4</li> 
     <li>Item 5</li> 
    </ul> 
</div> 
<div style="background-color: blue;"> 
    <p>Some Text</p> 
    <p>Another paragraph</p> 
</div> 

Dlaczego drugi div, który ma niebieskie tło rozwinąć się za pierwszym div, który zawiera listę elementów? Jak mogę go naprawdę unieść obok pierwszego elementu div?

Answer 1

Jeśli chcesz niebieskie pole, aby być obok listy, trzeba go unosić, a także:

<div style="border: solid 1px navy; float: left;"> 
<ul> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
    <li>Item 4</li> 
    <li>Item 5</li> 
</ul> 
</div> 
<div style="background-color: blue; float:left;"><p>Some Text</p><p>Another paragraph</p></div> 

Answer 2

Kiedy pierwszy div jest płynął w lewo, drugi div jest umiejscowiony jakby to robi nie istnieje (chociaż dowolny tekst z drugiego elementu div będzie płynął wokół elementu div). Zobacz the CSS2 specification, aby uzyskać więcej informacji o zachowaniu elementów pływających.

Aby uzyskać drugi element div, który będzie unoszący się obok pierwszego elementu div, można dodać float: left do drugiego elementu div.

Ewentualnie, jeśli znana jest szerokość pierwszego elementu div, można dodać lewy margines do drugiego elementu div.

Answer 3

Dodaj overflow: auto; zoom: 1.0; do 2 div

jest inaczej (aw pewnym sensie bliżej co został poproszony) niż oddanie float: left; na 2 div ponieważ zachowuje szerokość 2nd div rozszerza miarę możliwe z prawej strony bez sztywnych wartości szerokości. zoom: 1.0; jest potrzebny do nadania układowi elementów w IE.

<div style="border: solid 1px navy; float: left;"> 
<ul> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
    <li>Item 4</li> 
    <li>Item 5</li> 
</ul> 
</div> 
<div style="background-color: blue; overflow: auto; zoom: 1.0;"><p>Some Text</p><p>Another paragraph</p></div> 

Answer 4

Chcesz, aby drugi div pływał obok pierwszego? Następnie dodajemy float:left do drugiego elementu div.

Nie stwórz kolejnego diva wyłącznie do oczyszczenia, to jest strasznie niewiarygodne.

EDYCJA: nie działa dla IE, musisz podać div hasLayour w tym przypadku, który obejmuje hack dodawania zoom:1.0 lub wymuszania stałego wymiaru, którego możesz nie być w stanie zrobić. Nie hakuj, gdy istnieje poprawne rozwiązanie. Chcesz, żeby się unosił, używaj pływaka.

Answer 5

Powodem, dla którego obserwujesz zachowanie, które opisujesz, są instrukcje, które podajesz DIV.

Złammy go:

<div style="border: solid 1px navy; float: left;"> 

to opierając się na domyślne zachowanie dla wszystkiego z wyjątkiem granicy i przez pływające go, mówisz pole przypiąć się do lewego marginesu (z jego rodzicem, który jest tutaj uważany za ciało) niezależnie od tego, co tam jeszcze należy. Domyślna szerokość DIV wynosi 100% szerokości obiektu nadrzędnego (nadal znacznika body). Domyślną pozycją jest bycie następnym elementem bloku w przepływie - ponieważ nie ma żadnych innych elementów bloków, wyrównuje się on w pionie z górnym marginesem.

Następnie poprosił innego div, aby to zrobić:

<div style="background-color: blue; float:left;"> 

który jest zasadniczo to samo.Tutaj nie podałeś DIV ani nowej szerokości, ani żadnych dodatkowych instrukcji dotyczących tego, w którym miejscu układu powinny teraz iść, więc przylega on do lewego marginesu, a górny margines znajduje najbliższy element bloku, do którego należy przypiąć (nadal ciało).

Aby uzyskać te w kolejce obok siebie, wykonaj następujące czynności:

<style type="text/css"> 
    .leftBox, .rightBox 
    { 
     width: 48%; /*leave some room for varying browser definitions */ 
     border: 1px solid navy; 
     float: left; 
     display: inline; /* follow the semantic flow of the page and don't break the line */ 
     clear: left; /* don't allow any other elements between you and the left margin */ 
    } 

    .rightBox 
    { 
     border: none; 
     background-color: blue; 
     clear: right; 
    } 
</style> 
<div class="leftBox"> 
    <ul> 
     <li>Item 1</li> 
     <li>Item 2</li> 
     <li>Item 3</li> 
     <li>Item 4</li> 
     <li>Item 5</li> 
    </ul> 
</div> 
<div class="rightBox"> 
    <p> 
     some other text</p> 
</div>