垂直对齐有“清除”吗？

Question

是否有类似的技术，如float和clearfix，但用于垂直对齐。

我希望分离不同的元素(无论是内联元素还是浮动元素)，使它们始终与顶部或底部对齐。

在这个jsFiddle中，我希望红色和绿色水平对齐。我不能更改CSS或现有的div。我只能包装.s1和.s2

Answer 1

好的..。如果您知道类名，您可以这样做：

见演示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：

见演示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;
}

如果你的问题解决了让我知道！