javascript - 为什么更改 IninterHtml 时这个 div 会下拉？

Question

我有一个拇指div，想在点击时更改innerHtml；但是，每当我在其中插入一些东西时，它们就会下降，我希望它们保持一致。

这是jsfiddle：

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

<!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>

score 4 · Accepted Answer

由于某种原因，使用display: inline-block导致了这个问题......

有两个简单的解决方案：

溢出：隐藏

您可以将此行添加到您的课程中：

overflow: hidden;

这是工作的jsFiddle 演示

向左飘浮

您也可以开始使用浮动到左侧而不是 display: inline-block 并添加所需的边距。

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

这是工作的jsFiddle 演示

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

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

如果你愿意，你可以改变它

score 2 · Accepted Answer

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

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

score 0 · Accepted Answer

         (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;
     }

演示

希望能帮助到你

score 0 · Accepted Answer

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

JSFIDDLE 演示

score 0 · Accepted Answer

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


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

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

javascript - 为什么更改 IninterHtml 时这个 div 会下拉？

5 回答 5

Related

Reference