Question

我只是试图显示一个盒子网格，每个盒子都有关于狗品种的信息。我的问题是：当我在一个类中声明一个样式内联样式与相同样式时，行为似乎有所不同。我很困惑为什么会出现差异，据我所知，不应该有任何差异。

以下代码表现正常：http://imgur.com/a/z2b5c 这可以通过以下代码实现。要注意的代码是在样式中声明的dogDisplay类，以及正文中类dogDisplay的div。 div具有内联样式=＆＃34; position：absolute＆＃34;。

<!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 =＆＃34; position：absolute＆＃34;进入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>

为什么会有区别？谢谢！

Answer 1

在你的第一个例子中，这一行： sklearn.svm.SVC 与起始布局冲突： plt.scatter(pos, .3 + np.zeros(shape=pos.shape), ...) plt.scatter(neg, -.3 + np.zeros(shape=neg.shape), ...)

意味着只有初始$("#container").append("<div class='dogDisplay'></div>");才具有绝对定位。在第二个例子中，所有这些都将具有绝对定位。

在线型与类型声明样式时行为会发生变化

1 个答案: