2014-04-22 16 views
5

Bu sayfada çalışıyorum: http://www.insidemarketblog.com/test-4/CSS duyarlı süzgeç sola ve sağa (hangi div üstte değişir)?

"Test" kelimesinin div sekmesinde solda olduğunu ve görüntünün div içinde sağda olduğunu göreceksiniz.

Yeniden boyutlandırırsanız, soldaki div sol üstte ve div altının sağa ineceğini görürsünüz.

Bu siparişi nasıl tersine çevirebilirsiniz? Böylece div sola doğru sola indi. Yaptığım hiçbir şey işe yaramıyor.

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

kelime "test" Eğer ne konuştuğunu deşifre etmek bir ağrı yapma, sitenizde 3 kez görünür. Sorununuzu gösteren bir jsFiddle yapmalısınız. – dezman

+0

HTML'de "banner_left" inizi "banner_right" ın altına koymayı denediniz mi? –

+1

Sadece HTML etiketlerinizin sırasını değiştirebilirsiniz ve amaçlanan şekilde çalışacaktır. Cevabımı aşağıya bakın. – Mastrianni

cevap

5

İstenilen efekti elde etmek için HTML etiketlerinin sırasını değiştirebilirsiniz.

Değişim bu: Buna

<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> 

:

<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 - ben size nasıl pm veya iletişim bilgilerinizi verebilir misiniz? – user3117275

0
aynı yönde hem onları yüzer

.

İlgili konular