CSS- Başka bir [jsfiddle] altında kaydırmak için% 100 genişlik div alma

Question

Duyarlı bir düzende iki sütunum var. Sol sütun kenar çubuğudur ve sağdaki sütun içeriktir.

Bir ekran sorgusu kullanarak, ekran genişliği küçük olduğunda, sütunlar% 100 genişliğe ve birbirinin üzerine yığılır.

Bu durumda, kenar çubuğunun (ilk div) içeriğin altında görünmesini istiyorum (ikinci div).

float: right numaralı telefonu kullanmadan önce küçük bir ekranda% 100, ancak% 100 genişlikte kullanmayı denedim, şamandıranın önemi yok.

.left, .right { 
    width: 100%; 
    float: left; 
    background: green; 
} 
.left { 
    float: right; 
    background: red; 
} 
.half { 
    width: 50%; 
} 
.space { 
    width: 100%; 
    display: block; 
    height: 40px; 
} 

Ve sayfadaki

: Ben bu kimse içeriği altında kenar çubuğu sarmak istedi ilk defa değil eminim https://jsfiddle.net/ph09frvw/

: Burada

<div class="left half"> <!-- To mimic full screen size --> 
Left 
</div> 
<div class="right half"> 
Right 
</div> 

<div class="space"></div> 

<div class="left"> <!-- To mimic small screen size --> 
Left 
</div> 
<div class="right"><!-- This should appear first --> 
Right 
</div> 

keman olduğunu bir çözüm bulamadı.

Answer 1

Sen display: flex kullanabilir ve <div> elemanlarının sırasını değiştirmek için order özelliğini kullanabilirsiniz.

.flex { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
} 
 
.left { 
 
    order: 2; 
 
    flex: 1 0 50%; 
 
    background: red; 
 
} 
 
.right { 
 
    order: 1; 
 
    flex: 1 0 50%; 
 
    background: green; 
 
} 
 
.full { 
 
    margin-top: 20px; 
 
} 
 
.full > .left, 
 
.full > .right { 
 
    flex: 1 0 100%; 
 
}

<div class="flex"> 
 
    <div class="left"> 
 
    Left 
 
    </div> 
 
    <div class="right"> 
 
    Right 
 
    </div> 
 
</div> 
 

 
<div class="flex full"> 
 
    <div class="left"> 
 
    Left 
 
    </div> 
 
    <div class="right"> 
 
    Right 
 
    </div> 
 
</div>

Answer 2

flex-direction ile birlikte divlarınızı yeniden düzenlemek için display:flex; özelliğini kullanabilirsiniz. Ref: https://css-tricks.com/almanac/properties/f/flex-direction/

Answer 3

HTML elemanları daki ilgili sınıf isimleri başvuru unutmayın: Yatay hizalama için yararlı olabilir yüzen birlikte, dikey hizalama için küçük bir yardım olacaktır, İşte bir örnek sınıf özniteliği.

CSS'niz display:block başka, hile yapmak gibi bir şey denemelisiniz: float: left

kullandığınızda: Bu otomatik olarak eğer genişliği boyunca yayılan gerektiği gibi bir div elemana display:block, sen width:100% belirtmek gerekmez başka bir şey tarafından engellenmez.

Bu öğelerin position öğesinin "göreceli" olduğundan emin olun, aksi halde beklendiği gibi çalışmayabilir; Küresel olarak, bazı özel etiketlerin "mutlak" olarak gösterilmesi ve elde etmeye çalıştığınız şeyi bozabileceği belirtilebilir.