, boşlukları kaplarının tabanına hizalayın

Question

Bunun basit olacağını düşündüm, her iki iç parçayı (yeşil ve mavi) kaplarının (kırmızı) altına hizalamanız gerekiyor. Mutlak konumlandırmayı kullanmamaya çalışıyorum ve bunun ie6,7,8 ff krom safari vb. Uyumlu olmasına ihtiyacım var.

<div style="border:1px solid red;"> 
    <div style="border:1px solid green; width:20px; height:20px; float:left;"></div> 
    <div style="border:1px solid blue; width:20px; height:30px; float:left;"></div> 
    <div style="clear:both;"></div> 
</div> 

i vertical-align kullanarak denedim ama basit bir çözüm bulamıyor.

Yardımlarınız için teşekkürler, s.

<div style="border:1px solid red; position:relative;"> 
    <div style="border:1px solid green; width:20px; height:20px; float:left; position:absolute; bottom:0px;"></div> 
    <div style="border:1px solid blue; width:20px; height:30px; float:left; position:absolute; bottom:0px;"></div> 
    <div style="clear:both;"></div> 
</div> 

Answer 1

Neden mutlak konumlandırmayı kullanamazsınız:

DÜZENLEME burada abs pos çözüme benim girişimi mi? Dikey hizalama çalışmıyor (tablolar hariç). İçerinizin pozisyonunu yapın: göreceli. Sonra iç divları alt kullanarak kesin olarak konumlandırın: 0; Bir çekicilik gibi çalışmalı. Neredeyse her zaman bazı ikincil zarar, yani istenmeyen yan etkileri olduğundan Zoidberg tarafından

DÜZENLEME,

<div style="position:relative; border: 1px solid red;width: 40px; height: 40px;"> 
    <div style="border:1px solid green;position: absolute; bottom: 0; left: 0; width: 20px; height: 20px;"></div> 
    <div style="border:1px solid blue;position: absolute; bottom: 0; left: 20px; width: 20px height: 20px;"></div> 
</div> 

Answer 2

Ben de mutlak konumlandırma, sevmiyorum, (i yerine cevabı güncellenir). Özellikle de duyarlı bir tasarımla çalışırken. Bir alternatif var - kum torbası tekniği. Bir "yardımcı" elemanı ekleyerek, ya CSS ile işaretlemede, öğeleri aşağıya doğru kabın altına doğru itebiliriz. Örnekler için bkz. http://community.sitepoint.com/t/css-floating-divs-to-the-bottom-inside-a-div/20932.

Answer 3

Hile yapabilirsiniz! Senin div 20px yüksektir Say sonraki kabın üst kısmında div yerleştirin ve

position: absolute; 
top: -20px; 

O anlam temiz olmayabilir ama bununla yapmanın duyarlı tasarımlar

Answer 4

modern bir yoldur ile ölçeğe kurulmuştur kutuya align-items: flex-end; ekleyerek flexbox.

<div class="Container"> 
    <div>one</div> 
    <div>two</div> 
</div> 

kullanın bu tarz: Bu içerik ile

.Container { 
    display: flex; 
    align-items: flex-end; 
} 

https://codepen.io/rds/pen/gGMBbg