我只是想显示一个方框网格，每个方框都有关于狗品种的信息。我的问题是:当我声明一个内联样式与在一个类中声明相同样式时，行为似乎有所不同。我很困惑为什么会有差异，而据我所知应该没有差异。
这是正确运行的代码:http://imgur.com/a/z2b5c 这发生在下面的代码中。需要注意的代码是样式中声明的 dogDisplay 类，以及 body 中类 dogDisplay 的 div。 div 有一个内联style="position:absolute"。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="bootstrap-3.3.6-dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
.dogDisplay {
display: inline-block;
width: 300px;
height: 300px;
margin: 10px;
background-color: grey;
}
.dogName {
font-size: 20px;
text-align: center;
}
.img {
width: 200px;
height: 200px;
display: block;
margin-left: auto;
margin-right: auto;
}
.content {
background-color: red;
}
</style>
</head>
<script>
//This just loads the dog information from a JSON file
var dogInfo = [];
function displayInfo(dogBreeds) {
$("#container").append("<div class='dogDisplay'></div>");
}
window.onload = function() {
$.getJSON("breeds.json", function(json) {
var i;
console.log(typeof(json.dogBreeds));
dogInfo = json.dogBreeds;
displayInfo(json.dogBreeds);
})
}
</script>
<body>
<div class="well" style="height:300px"></div>
<div id="container" class="container" style="width:100%;background-color:lightblue;border:black 2px solid;">
<div class="dogDisplay" style="position:absolute">
<div class="content">
<p class="dogName">Dog Name</p>
<img class="img" src="images/place-holder.jpg" alt="Place-holder">
</div>
</div>
</div>
</body>
然而。将 style="position:absolute"移动到 dogDisplay 类时，这是新行为:http://imgur.com/a/sv3Oh
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="bootstrap-3.3.6-dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
.dogDisplay {
display: inline-block;
width: 300px;
height: 300px;
margin: 10px;
background-color: grey;
position: absolute;
}
.dogName {
font-size: 20px;
text-align: center;
}
.img {
width: 200px;
height: 200px;
display: block;
margin-left: auto;
margin-right: auto;
}
.content {
background-color: red;
}
</style>
</head>
<script>
var dogInfo = [];
function displayInfo(dogBreeds) {
$("#container").append("<div class='dogDisplay'></div>");
}
window.onload = function() {
$.getJSON("breeds.json", function(json) {
var i;
console.log(typeof(json.dogBreeds));
dogInfo = json.dogBreeds;
displayInfo(json.dogBreeds);
})
}
</script>
<body>
<div class="well" style="height:300px"></div>
<div id="container" class="container" style="width:100%;background-color:lightblue;border:black 2px solid;">
<div class="dogDisplay">
<div class="content">
<p class="dogName">Dog Name</p>
<img class="img" src="images/place-holder.jpg" alt="Place-holder">
</div>
</div>
</div>
</body>
为什么会有差异？谢谢!
最佳答案
在您的第一个示例中，这一行:
$("#container").append("<div class='dogDisplay'></div>");
与起始布局冲突:
<div class="dogDisplay" style="position:absolute">
仅表示初始 .dogDisplay就会有绝对的定位。在第二个示例中，它们都将具有绝对定位。
关于javascript - 声明内联样式与类时的行为变化，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38666890/