Div altyazı altında CSS Div

Başka bir div altında (normalde yaptığı gibi) görünmesi için div ayarlaması konusunda çok fazla sorun yaşıyorum.Div altyazı altında CSS Div

MaterializeCSS kullanıyorum. şöyle Benim düzenidir:

<div class="container valign-wrapper"> 
    <div class="customClass"></div> 
    <div class="customClass"></div> 
</div>

Ve css: Ancak

.valign-wrapper{ 
    display: flex; 
    align-items: center; 
} 

.customClass{ 
    margin: 0 auto; 
    /* text and font css */ 
}

, hatta width:100% ekleme veya ekran sınıfı iki div'ler onlar yan yana görünür, dikey görünür yapmayacağız değişen. valign-wrapper sınıfının kaldırılmasının işe yarayacağını öğrendim, ancak öğelerim açıkça sitenin en üstünde görünecek ...

Aynı sorunla karşılaştıysanız, bu yardımın değerini takdir ediyorum!

kaynak

2016-03-21 Jo Colina

'görüntü: flex' biraz büyü ekler, ancak sensin Bu tür sihirleri çocuk özellikleriyle yönetmesi gerekenler. Eğer flexbox'ın nasıl çalıştığını bilmiyorsanız, lütfen başka bir teknik (inline-block, float, table-cell, vb.) Kullanın –

bir “dot”, “.valign-wrapper” btw – Gintoki

sadece burada eksik, gerçek kodu değil ... @ MarcosPérezGude bir css framework kullanarak, –

Sen esnek yönünü eklemeniz gerekir:

.valign-wrapper { flex-direction: column; }

Bu şekilde, esnek ürün bir sütun olarak konumlandırılmış. Eğer flex-direction: row; (varsayılan) ile gitmek gerekiyorsa Alternatif olarak, yine satır stili korumak ancak iki öğe sarın ve sonunda birbirlerine yukarıda konumlandırılmış olması

.valign-wrapper { flex-wrap: wrap; } 
.customClass { flex-basis: 100%; }

kullanabilirsiniz.

sonrası 2013 den olsa da, yine de güzel bir şekilde flexbox'a büyüsünü öğretir ve ben sadece bu konuda okumak için herkese tavsiye ederim: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

kaynak

2016-03-21 14:26:12 Paul

yapabilirim çok fazla değil, ya da belki sadece valign-wrapper sınıfını kapsayıcınızdan kaldırın. – FLX

Teşekkürler! "Flex-wrap: wrap" ve "flex-based: 100%" eklemek hile yaptı! –

Div altyazı altında CSS Div

cevap

İlgili konular