为啥当我使用 jQuery 自定义插件将 src 添加到图像时，段落会向下移动？

Posted

技术标签:

【中文标题】为啥当我使用 jQuery 自定义插件将 src 添加到图像时，段落会向下移动？【英文标题】：Why when i add the src to image using jQuery custom plugin, the paragraph is getting moved down?为什么当我使用 jQuery 自定义插件将 src 添加到图像时，段落会向下移动？ 【发布时间】：2018-01-02 18:52:04 【问题描述】：

这是我的代码

<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 选项时，图像会链接到其源，但段落会向下移动一点，为什么会发生这种情况？好奇怪！

谢谢。

【问题讨论】：

将vertical-align: top; 给#boxOne。 【参考方案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>

【讨论】：

但没有空格..同时我不是downvoter 有问题你可以看到四个块。在你的答案中它只显示两个..我认为你只需要为boxOne id做css 我还是很困惑，我使用了相同的 sn-p，只添加了一行代码，我可以在这里看到四个块，没有这样的迹象表明只对 boxOne 使用 css 跨度> 您在我的问题中看到每个框都是分开的，但在您的答案中，顶部两个框和底部两个框之间没有任何空间，这使得它们看起来像两个框。这就是其他人所说的。 知道了，我在全页模式下看这个【参考方案2】：

您需要将 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>

【讨论】：

感谢您的回答，即使其他人的回答都是正确的，您的回答正是我想要的！【参考方案3】：

在标签内使用para，它将很好地排列Ur数据， 由于图像阴影它发生

【讨论】：

【参考方案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>

【讨论】：

【参考方案5】：

将vertical-align: top; 给#boxOne。

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

【讨论】：

【参考方案6】：

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

p 
   margin: 0px;
   float: left;

【讨论】：

以上是关于为啥当我使用 jQuery 自定义插件将 src 添加到图像时，段落会向下移动？的主要内容，如果未能解决你的问题，请参考以下文章

jquery 滚动条插件 可以自定义

如何将自定义事件添加到 jQuery 插件模式中

jQuery 在自定义插件上实现销毁方法

jquery插件之poshytip

使用 grails 2.2.0 和资源插件找不到自定义 jquery css 图像

使用带有Notify.js jQuery插件的外部自定义CSS