2014-04-22 7 views
5

Pracuję na tej stronie: http://www.insidemarketblog.com/test-4/CSS responsive float left and right (zmień, który div idzie na górę)?

Zobaczysz, że słowo "test" znajduje się w dziobie przepływa w lewo, a obraz jest w dziobie przepłynął w prawo.

Jeśli zmienisz rozmiar, zobaczysz, że lew unoszą się w lewo, a element div unosi się w prawo.

Jak można odwrócić tę kolejność? Tak, że div płynął w lewo idzie PONIŻEJ div płynął w prawo. Nic, co robię, nie działa.

HTML:

<div class="main_header"> 
<div class="banner_left"> 
<p>test</p> 
</div> 
<div class="banner_right"> 
<img src="http://www.insidemarketblog.com/wp-content/uploads/2014/04/oz_main3.jpg"> 
</div> 
</div> 

CSS:

.main_header { 
    background: none repeat scroll 0 0 #2B3443; 
    border: 1px solid #FFFFFF; 
    height: 300px; 
    margin: 0 auto; 
    overflow: hidden; 
} 
.banner_left { 
    float: left; 
} 
.banner_right { 
    float: right; 
} 
+0

Słowo pojawi się napis "test" 3 razy na swojej stronie, dzięki czemu ból rozszyfrować co mówisz. Powinieneś po prostu zrobić jsFiddle pokazujący twój problem. – dezman

+0

Czy próbowałeś umieścić 'banner_left' pod' banner_right' w HTML? –

+1

Możesz po prostu zamienić kolejność tagów HTML i będzie działać zgodnie z przeznaczeniem. Zobacz moją odpowiedź poniżej. – Mastrianni

Odpowiedz

5

Możesz zamienić kolejność znaczników HTML, aby osiągnąć pożądany efekt.

Zmień to:

<div class="main_header"> 
<div class="banner_left"> 
<p>test</p> 
</div> 
<div class="banner_right"> 
<img src="http://www.insidemarketblog.com/wp-content/uploads/2014/04/oz_main3.jpg"> 
</div> 
</div> 

do tego:

<div class="main_header"> 
<div class="banner_right"> 
<img src="http://www.insidemarketblog.com/wp-content/uploads/2014/04/oz_main3.jpg"> 
</div> 
<div class="banner_left"> 
<p>test</p> 
</div> 
</div> 
+0

Mastrianni - w jaki sposób mogę zaprosić ciebie lub czy możesz podać mi swoje dane kontaktowe? – user3117275

0

unosić ich obu w tym samym kierunku.

Powiązane problemy