css - 垂直对齐是否有“clearfix”？

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;
}

让我知道是否解决了您的问题！