css - 垂直对齐是否有 "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;  
}

或者如果你可以包装文件，你可以像这样 float 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;
}

如果解决了您的问题，请告诉我!