Question

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

我想分隔不同的元素（内联或左浮），使它们始终与顶部或底部对齐。

在此jsFiddle中，我希望红色和绿色水平对齐。我无法更改CSS或现有的div。我只能包裹.s1和.s2

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

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

垂直对齐是否有“clearfix”？

1 个答案: