内联包装的 div 中的段落变得垂直错位

Question

我正在试用 MixItUp jQuery 插件，我很难让 CSS 正常工作。我有五个 div 具有 display: inline-block、基于百分比的宽度和固定高度。每当 p 元素中的文本换行以致它们具有不同的行数时，未换行的 div 会比换行的显示得低。

~~我不认为使用 MixItUp 插件本身是这种情况下的问题，但也许是。~~

参见 http://jsfiddle.net/don01001100/8p80njxa/。尝试扩大和缩小 Result 区域。

谢谢！

edit：我添加了一些屏幕截图以及一些静态 HTML 代码，其中包含显示问题的基本 CSS。基本上，我希望框始终垂直对齐，但随着内容的环绕，它们会交错排列。

HTML

<div class="controls">
    <button class="filter" data-filter="all" type="button">
        All
    </button> 
    <button class="filter" data-filter=".blue" type="button">
        Blue
    </button>
    <button class="filter" data-filter=".green" type="button">
        Green
    </button>
</div>

<div>
   <button class="sort" data-sort="myorder:asc">Ascencind</button>
    <button class="sort" data-sort="myorder:desc">Descending</button>
</div>

<div id="color-container">
    <div class="mix green" data-myorder="1">
        <p>Lorem Ispum</p>
    </div>    
    <div class="mix blue" data-myorder="2">
        <p>Dolor Sit Amet</p>
    </div>    
    <div class="mix blue" data-myorder="3">
        <p>Consectetur Adipiscing</p>
    </div>   
    <div class="mix green" data-myorder="4">
        <p>Nam Commodo</p>
    </div>  
    <div class="mix blue" data-myorder="5">
        <p>Mauris Sit Amet</p>
    </div>   
</div>

JavaScript

$(document).ready(function(){
    // Start mixitup
    $('#color-container').mixItUp();

    // See http://jsfiddle.net/T2Xe9/.    

    // Step 1: Select the style element and change it to text/less
    $('head style[type="text/css"]').attr('type','text/less');

    // Step 2: Set development mode to see errors
    less.env = 'development';

    // Step 3: Tell Less to refresh the styles
    less.refreshStyles();
});

少

#color-container {
    border: 1px dashed #CCC;
    padding: 3px;
    text-align: center;
    .mix {
        display: none;
        width: 15%;
        height: 30px;
        padding: 3px;
        text-align: center;
        &.green {
            background-color: #9F9;
            border: 1px solid #6C6;
        }
        &.blue {
            background-color: #69F;
            border: 1px solid #36C;
        }
        &::after {
            content: attr(data-myorder);
            color: #FFF;
            float: left;
            font-size: .75em;
        }
    }
}

缩小页面的结果

静态 HTML 基本代码 CSS

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <title>MixItUp Example - jsFiddle demo</title>
        <link rel="stylesheet" type="text/css" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />

        <style type='text/css'>
            #color-container {
                border: 1px dashed #CCC;
                padding: 3px;
                text-align: center;
            }
                #color-container .mix {
                    display: inline-block;
                    width: 15%;
                    height: 30px;
                    padding: 3px;
                    text-align: center;
                }
                    #color-container .mix.green {
                        border: 1px solid #6C6;
                    }
                    #color-container .mix.blue {
                        border: 1px solid #36C;
                    }
        </style>
    </head>
    <body>
        <div id="color-container">
            <div class="mix green" data-myorder="1">
                Lorem Ispum
            </div>
            <div class="mix blue" data-myorder="2">
                Dolor Sit Amet
            </div>
            <div class="mix blue" data-myorder="3">
                Consectetur Adipiscing
            </div>
            <div class="mix green" data-myorder="4">
                Nam Commodo
            </div>
            <div class="mix blue" data-myorder="5">
                Mauris Sit Amet
            </div>
        </div>
    </body>
</html>

Answer 1

将 vertical-align: top 添加到具有 display: inline-block

的元素

内联包装的 div 中的段落变得垂直错位

Paragraphs inside inline-wrapped divs become vertically misaligned

css

mixitup