Пункты внутри встроенных divs становятся вертикально несогласованными

Я пытаюсь подключиться к плагину MixItUp jQuery, и мне нелегко заставить CSS работать правильно. У меня есть пять div s с display: inline-block, процентная ширина и фиксированные высоты. Всякий раз, когда текст в элементах p обертывается так, что у них разное количество строк, не завернутые div s выглядят ниже, чем те, у которых есть обертка.Пункты внутри встроенных divs становятся вертикально несогласованными

~~Я не думаю, что использование плагина MixItUp является проблемой в этом случае как таковой, но, возможно, это так.~~

См. http://jsfiddle.net/don01001100/8p80njxa/. Попробуйте расширить и сжать Результат.

Спасибо!

Редактировать: Я добавил несколько скриншотов, а также некоторый статический 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; 
     } 
    } 
}

Результат s из Уменьшая Page

статический HTML код с Basic 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>

источник

2015-08-20 Don 01001100

Как бы вы хотели, чтобы ящики появлялись? Это середина родительского контейнера? –

@ManojKumar, я добавил несколько скриншотов. Я думаю, если бы ваш экран был слишком большим или слишком маленьким, вы бы не увидели проблему. –

Добавить vertical-align: top в элементы с display: inline-block

источник

2015-08-20 01:23:33 Gacci

Спасибо @Gacci. Вот так! –

Пункты внутри встроенных divs становятся вертикально несогласованными

ответ

Смежные вопросы