为什么当我使用 jQuery 自定义插件将 src 添加到图像时，该段落被下移了？

Question

这是我的代码

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

<head>
    <title>Box using Plugin</title>
    <script>
        (function ($) {
            $.fn.boxPlugin = function (options) {
                //default values
                var settings = $.extend({
                    color: "green",
                    width: "100px",
                    height: "100px",
                    backgroundColor: "black",
                    imageURL: "",
                    display: "inline-block"

                }, options);

                $(this).addClass('boxAdded').css({ "color": settings.color, "width": settings.width, "height": settings.height, "background": settings.backgroundColor, "display": settings.display }).find('img').attr('src', settings.imageURL);
            }
        }(jQuery));
    </script>
    <style>
        p {
            margin: 0px;
        }
    </style>
    <script>
        $(function () {
            $(".box").boxPlugin({ width: "200px", height: "200px", backgroundColor: "lightblue" });
            $("#boxOne").boxPlugin({ width: "200px", height: "200px", backgroundColor: "lightblue", imageURL: "https://www.w3schools.com/images/w3schools_green.jpg" });
        })
    </script>
</head>

<body>
    <p class="box"></p>
    <p class="box"></p>
    <p class="box"></p>
    <p id="boxOne">
        <img src="" />
    </p>
</body>

</html>

如果我不将 imageURL 添加到选项中，那么宽度、高度就会设置好，它就可以正常工作了。

但是，当我添加 imageURL 选项时，图像会链接到其来源，但段落会向下移动一点，为什么会发生这种情况？好奇怪！

谢谢。

Answer 1

将您的 CSS 更改为：

p {
   margin: 0px;
   vertical-align: top;
}

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

<head>
    <title>Box using Plugin</title>
    <script>
        (function ($) {
            $.fn.boxPlugin = function (options) {
                //default values
                var settings = $.extend({
                    color: "green",
                    width: "100px",
                    height: "100px",
                    backgroundColor: "black",
                    imageURL: "",
                    display: "inline-block"

                }, options);

                $(this).addClass('boxAdded').css({ "color": settings.color, "width": settings.width, "height": settings.height, "background": settings.backgroundColor, "display": settings.display }).find('img').attr('src', settings.imageURL);
            }
        }(jQuery));
    </script>
    <style>
        p {
            margin: 0px;
            vertical-align: top;
        }
    </style>
    <script>
        $(function () {
            $(".box").boxPlugin({ width: "200px", height: "200px", backgroundColor: "lightblue" });
            $("#boxOne").boxPlugin({ width: "200px", height: "200px", backgroundColor: "lightblue", imageURL: "https://www.w3schools.com/images/w3schools_green.jpg" });
        })
    </script>
</head>

<body>
    <p class="box"></p>
    <p class="box"></p>
    <p class="box"></p>
    <p id="boxOne">
        <img src="" />
    </p>
</body>

</html>

Answer 2

使用para inside标签，它会很好地排列Ur数据，由于图像阴影，它发生了

Answer 3

您需要将 display:block; 分配给 img 以适应盒子。因为你所有的块都是 inline-block.

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

<head>
    <title>Box using Plugin</title>
    <script>
        (function ($) {
            $.fn.boxPlugin = function (options) {
                //default values
                var settings = $.extend({
                    color: "green",
                    width: "100px",
                    height: "100px",
                    backgroundColor: "black",
                    imageURL: "",
                    display: "inline-block"

                }, options);

                $(this).addClass('boxAdded').css({ 
                "color": settings.color, 
                "width": settings.width, 
                "height": settings.height, 
                "background": settings.backgroundColor, 
                "display": settings.display }).find('img').attr('src', settings.imageURL).css('display',settings.imgdisplay);
            }
        }(jQuery));
    </script>
    <style>
        p {
            margin: 0px;
        }
    </style>
    <script>
        $(function () {
            $(".box").boxPlugin({ width: "200px", height: "200px", backgroundColor: "lightblue" });
            $("#boxOne").boxPlugin({ 
            width: "200px", 
            height: "200px", 
            backgroundColor: "lightblue", 
            imageURL: "https://www.w3schools.com/images/w3schools_green.jpg" ,
            imgdisplay: "block"
            });
        })
    </script>
</head>

<body>
    <p class="box"></p>
    <p class="box"></p>
    <p class="box"></p>
    <p id="boxOne">
        <img src=""  />
    </p>
</body>

</html>

Answer 4

只需插入：

#boxOne img {
   position: absolute;
}

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

<head>
    <title>Box using Plugin</title>
    <script>
        (function ($) {
            $.fn.boxPlugin = function (options) {
                //default values
                var settings = $.extend({
                    color: "green",
                    width: "100px",
                    height: "100px",
                    backgroundColor: "black",
                    imageURL: "",
                    display: "inline-block"

                }, options);

                $(this).addClass('boxAdded').css({ "color": settings.color, "width": settings.width, "height": settings.height, "background": settings.backgroundColor, "display": settings.display }).find('img').attr('src', settings.imageURL);
            }
        }(jQuery));
    </script>
    <style>
        p {
            margin: 0px;
        }
        #boxOne img {
            position: absolute;
        }
    </style>
    <script>
        $(function () {
            $(".box").boxPlugin({ width: "200px", height: "200px", backgroundColor: "lightblue" });
            $("#boxOne").boxPlugin({ width: "200px", height: "200px", backgroundColor: "lightblue", imageURL: "https://www.w3schools.com/images/w3schools_green.jpg" });
        })
    </script>
</head>

<body>
    <p class="box"></p>
    <p class="box"></p>
    <p class="box"></p>
    <p id="boxOne">
        <img src="" />
    </p>
</body>

</html>

Answer 5

添加样式属性的 p 标签向左浮动。

p {
   margin: 0px;
   float: left;
}

Answer 6

将 vertical-align: top; 交给 #boxOne。

最好给vertical-align: top;和display: inline-block。默认值 vertical-align 被视为 baseline。

为什么当我使用 jQuery 自定义插件将 src 添加到图像时，该段落被下移了？

Why when i add the src to image using jQuery custom plugin, the paragraph is getting moved down?

html

css

jquery

jquery-plugins