Question

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

~~我不认为使用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();
});

LESS

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

Answer 1

将<class name="com.example.BookStore" table="BOOK_SHELF"> <id name="id" type="long" column="bookShelfId"> <generator class="native" /> </id> <set name="books" table="SHELF_BOOK" cascade="all-delete-orphan" lazy="false"> <key column="bookShelfId" /> <one-to-many class="com.example.Book" /> </set> </class> <class name="com.example.Book" table="SHELF_BOOK"> <id name="id" type="long" column="shelfBookId"> <generator class="native" /> </id> <property name="name" not-null="true" unique="true"/> <property name="bookType" not-null="true"/> </class>添加到vertical-align: top

的元素中

内联包装div内的段落垂直未对齐

1 个答案: