gpt4 book ai didi

javascript - div 没有放置在与其相邻 div 相同的高度

转载 作者:太空宇宙 更新时间:2023-11-03 21:12:22 24 4
gpt4 key购买 nike

当我将我的 div 容器排成一排时,它们并没有放在同一高度。当在更大的视野中使用我的 fiddle 时,您可以看到它。所以尝试整页或类似的东西。

我使用 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>

最佳答案

在您的 .recordContainer 类上使用 vertical-align: middle;

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

关于javascript - div 没有放置在与其相邻 div 相同的高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45343245/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com