Question

我有一个拇指，想要在点击时更改innerHtml;然而，每当我在其中插入一些东西时，它们都会下降，我希望它们保持一致。

这是jsfiddle：

例如，如果我想在boogie div中添加“something”：

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
      <title>TITLE</title>
      <style>
         .thumbContainer {
            width: 200px;
         }
         .thumb {
            width: 95px;
            height: 95px;
            background-color: blue;
            display: inline-block;
         }
      </style>
   </head>
      <div>
         <div class="thumbContainer">
            <div id="boogie" class="thumb"></div>
            <div class="thumb"></div>
         </div>
         <div class="thumbContainer">
            <div class="thumb"></div>
            <div class="thumb"></div>
         </div>
         <div class="thumbContainer">
            <div class="thumb"></div>
            <div class="thumb"></div>
         </div>
         <div class="thumbContainer">
            <div class="thumb"></div>
            <div class="thumb"></div>
         </div>
         <div class="thumbContainer">
            <div class="thumb"></div>
            <div class="thumb"></div>
         </div>
      </div>
      <script>
         (function() {
            $(".thumb").bind("click", function() {
               $("#boogie").html("something");
            });
         })();
      </script>
   </body>
</html>

Answer 1

出于某种原因使用display: inline-block会导致此问题......

有两个简单的解决方案：

溢出：隐藏

您可以将此行添加到您的班级：

overflow: hidden;

这是工作jsFiddle Demo

Float：left

你也可以开始使用浮动到左边而不是显示：inline-block并添加想要的边距。

// display: inline-block
float: left
margin: 2.5px;

这是工作jsFiddle Demo

P.S我猜你正试图对每个div做出这种行为，所以我允许自己将html更改命令更改为：

$(this).html("something");

如果需要，可以更改此内容

Answer 2

     .thumb {
        color: white;
        width: 95px;
        height: 95px;
        margin: 2.5px;
        background-color: blue;
        float: left;
     }

http://jsfiddle.net/jtDzs/9/

Answer 3

         (function() {
            $(".thumb").on("click", function() {
             $(this).("something");
           });
          })();

CSS

     .thumb {
     color: white;
        width: 95px;
        height: 95px;
        background-color: blue;
        display: inline-block;
         float: left;
         margin: 2px;
     }

Demo

希望有所帮助

Answer 4

 $(".thumb").on("click", function() {
               $(this).append("something");
            });

JSFIDDLE DEMO

Answer 5

 (function() {
        $(".thumb").html("&nbsp;");
        $(".thumb").bind("click", function() {
           $("#boogie").html("something");
        });
     })();


.thumbContainer {
        width: 200px;
        height:100px;
     }

http://jsfiddle.net/jtDzs/11/

当InnerHtml发生变化时，为什么这个div下拉？

5 个答案: