Question

当我将div容器放在一行时，它们不会放在同一高度上。当你在更大的视野中使用我的小提琴时，你可以看到它。所以试试整页或类似的东西。

我使用display:inline-block;，因为我希望它们连成一排。当窗口变小时，它们应该自己开始一个新行。

function record(title, description){ 
    // record object
    this.title = title;
    this.description = description;
}

function init(){
    var records = []; // array of all record objects
 
 	// fill the Data -> test routine
    var foo = "invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.At vero eos et accusam et justo duo dolores et earebum.Stet clita kasd gubergren, n"
    var bar = " labore et dolore magna aliquyam erat, sed diam voluptua.At vero eos et";
 	for (var i = 0; i < 7; i++) {
        records.push(new record("title " + i, i % 2 == 0 ? foo : bar));
    }
        
    // build up the view
    $(records).each(function (index, currentRecord) {
        var recordContainer = $("<div></div>"); // parent container
        recordContainer.addClass("recordContainer");
        $(document.body).append(recordContainer);

        var title = $("<div>" + currentRecord.title + "</div>"); // title div
        title.addClass("recordTitle");
        recordContainer.append(title);

        var description = $("<div>" + currentRecord.description + "</div>"); // text div
        description.addClass("recordDescription");
        recordContainer.append(description);
    });
}

init(); // run the code ...

body{background-color: #262626;}

.recordContainer{
    display: inline-block;
    width: 250px;
    height: 150px;
    margin: 20px;
    padding: 20px;
    background-color: #373737;
    color: #ffffff;
}

.recordContainer:hover{
    background-color: #484848;
}

.recordContainer:hover .recordTitle{
    color: #7dd7ef;
}

.recordTitle{
    margin-bottom: 10px;
    color: #5bb5cd;
}

.recordDescription{
    margin-bottom: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 1

在vertical-align: middle;课程上使用.recordContainer。

.recordContainer{
    display: inline-block;
    vertical-align: middle;
    width: 250px;
    height: 150px;
    margin: 20px;
    padding: 20px;
    background-color: #373737;
    color: #ffffff;
}

Answer 2

将以下内容添加到recordContainer： vertical-align: top;

Answer 3

您只需添加vertical-align: top;

即可

＆＃13;

function record(title, description){ // record object
this.title = title;
this.description = description;
}

function init(){
 var records = []; // array of all record objects
 
 
 				// fill the Data -> test routine
        var foo = "invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.At vero eos et accusam et justo duo dolores et earebum.Stet clita kasd gubergren, n"
        var bar = " labore et dolore magna aliquyam erat, sed diam voluptua.At vero eos et";
 				for (var i = 0; i < 7; i++) {records.push(new record("title " + i, i % 2 == 0 ? foo : bar));}
        
        // build up the view
 
 $(records).each(function (index, currentRecord) {
            var recordContainer = $("<div></div>"); // parent container
            recordContainer.addClass("recordContainer");
            $(document.body).append(recordContainer);

            var title = $("<div>" + currentRecord.title + "</div>"); // title div
            title.addClass("recordTitle");
            recordContainer.append(title);

            var description = $("<div>" + currentRecord.description + "</div>"); // text div
            description.addClass("recordDescription");
            recordContainer.append(description);
        });
}

init(); // run the code ...

＆＃13;

body{background-color: #262626;}

.recordContainer{
    display: inline-block;
    vertical-align: top; /* fixes your problem */
    width: 250px;
    height: 150px;
    margin: 20px;
    padding: 20px;
    background-color: #373737;
    color: #ffffff;
}

.recordContainer:hover{
    background-color: #484848;
}

.recordContainer:hover .recordTitle{
    color: #7dd7ef;
}

.recordTitle{
    margin-bottom: 10px;
    color: #5bb5cd;
}

.recordDescription{
    margin-bottom: 10px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

Answer 4

display：inline-table属性可以帮助你

  .recordContainer{
        display: inline-table;
        width: 250px;
        height: 150px;
        margin: 20px;
        padding: 20px;
        background-color: #373737;
        color: #ffffff;
    }

Answer 5

由于每个块具有不同的内容高度，因此块的baseline计算方式不同 - 默认垂直对齐为baseline

将div的垂直对齐方式更改为top，bottom，middle，text-top或text-bottom中的任何一个，都意味着将使用垂直对齐方块相同的参考点

使用top的示例：

function record(title, description){ // record object
this.title = title;
this.description = description;
}

function init(){
 var records = []; // array of all record objects
 
 
 				// fill the Data -> test routine
        var foo = "invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.At vero eos et accusam et justo duo dolores et earebum.Stet clita kasd gubergren, n"
        var bar = " labore et dolore magna aliquyam erat, sed diam voluptua.At vero eos et";
 				for (var i = 0; i < 7; i++) {records.push(new record("title " + i, i % 2 == 0 ? foo : bar));}
        
        // build up the view
 
 $(records).each(function (index, currentRecord) {
            var recordContainer = $("<div></div>"); // parent container
            recordContainer.addClass("recordContainer");
            $(document.body).append(recordContainer);

            var title = $("<div>" + currentRecord.title + "</div>"); // title div
            title.addClass("recordTitle");
            recordContainer.append(title);

            var description = $("<div>" + currentRecord.description + "</div>"); // text div
            description.addClass("recordDescription");
            recordContainer.append(description);
        });
}

init(); // run the code ...

body{background-color: #262626;}

.recordContainer{
    display: inline-block;
    width: 250px;
    height: 150px;
    margin: 20px;
    padding: 20px;
    background-color: #373737;
    color: #ffffff;
    vertical-align: top;
}

.recordContainer:hover{
    background-color: #484848;
}

.recordContainer:hover .recordTitle{
    color: #7dd7ef;
}

.recordTitle{
    margin-bottom: 10px;
    color: #5bb5cd;
}

.recordDescription{
    margin-bottom: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

div与其邻居div

5 个答案: