垂直對齊是否有「clearfix」？

Question

是否有類似的技術，如float和clearfix，但用於垂直對齊。

我想分開不同的元素（內聯或左浮動），使它們始終與頂部或底部對齊。

在這jsFiddle我希望紅色和綠色水平對齊。我無法更改CSS或現有的div。我只能換.s1和.s2

Answer 1

好吧。如果你知道類名，你可以這樣做：

SEE DEMO 1

這裏的CSS：

.s1 { 
    display: inline-block; 
    font-size: 10px; 
    height: 20px; 
} 

.s2 { 
    display: inline-block; 
    background: green; 
    font-size: 20px; 
    height: 20px; 
} 

.s3 { 
    background: red; 
    height: 20px; 
} 

/* PUT THIS IN AN EXTRA FILE OR UNDER THE ABOVE STYLE */ 

.s1 {   
    vertical-align: bottom; 
} 

.s2 {   
    vertical-align: middle; 
} 

，或者您不能包裝文件，你可以像這樣漂浮div的：

SEE DEMO 2

HTML

<div class="wrap_1"> <!-- Wrap 1 --> 
    <div class="s1"> 
     <div class="s3">asdf</div> 
    </div> 
</div> 

<div class="wrap_2"> <!-- Wrap 2 --> 
    <div class="s2"> 
     <div>qwer</div> 
    </div> 
</div> 

CSS

.s1 { 
    display: inline-block; 
    font-size: 10px; 
    height: 20px; 
} 

.s2 { 
    display: inline-block; 
    background: green; 
    font-size: 20px; 
    height: 20px; 
} 

.s3 { 
    background: red; 
    height: 20px; 
} 

/* FLOAT THE DIV */ 

.wrap_1 div, .wrap_2 div { 

    float: left; 
} 

讓我知道如果解決您的問題！