内联 div 中的段落变得垂直未对齐答案

【问题标题】：Paragraphs inside inline-wrapped divs become vertically misaligned内联 div 中的段落变得垂直未对齐
【发布时间】：2015-08-20 00:30:24
【问题描述】：

我正在试用 MixItUp jQuery 插件，但我很难让 CSS 正常工作。我有五个divs，带有display: inline-block，基于百分比的宽度和固定高度。每当 p 元素中的文本换行以使它们具有不同的行数时，未换行的 divs 看起来比换行的要低。

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

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

谢谢！

编辑：我添加了一些屏幕截图以及一些带有显示问题的基本 CSS 的静态 HTML 代码。基本上，我希望这些框始终垂直对齐，但随着内容的换行，它们会交错排列。

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

缩小页面的结果

带有基本 CSS 的静态 HTML 代码

<!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>

【问题讨论】：

您希望这些框如何显示？是父容器的中间吗？
@ManojKumar，我添加了一些截图。我想如果您的屏幕太大或太小，您都不会看到问题。

标签： css mixitup

【解决方案1】：

将vertical-align: top 添加到带有display: inline-block 的元素中

【讨论】：

谢谢@Gacci。做到了！