如何正确显示div

时间:2018-08-28 17:15:23

标签: javascript css flexbox

https://jsfiddle.net/qz8hL574/1/

for (var key in table) {
    if (table.hasOwnProperty(key)) {
        $('<div class="element"></div>').appendTo('#list');
        document.getElementsByClassName("element")[key].innerHTML = table[key].symbol;
    }
}

这就是填充div的方式。

我的代码在那里。当我在本地运行它时,我得到这个http://prntscr.com/knwyh0 这意味着要显示的唯一元素是最后一个。 所有的div都在那里并且正确地填充了对象的值,但是如果我给z-index等于100的随机数,它不会放在顶部并且不会显示。希望我能看到它们在水平居中对齐的一列中。有什么想法可以解决吗?

1 个答案:

答案 0 :(得分:0)

不完全了解您的意思。.但是也许是这样?

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <script type="text/javascript">
    $(document).ready(function(){
      var lorum = "Lorem ipsum dolor sit amet, leo nulla ipsum vivamus, augue tempor inceptos sed nam rhoncus. Rhoncus montes litora. Praesent ut ad ornare fusce posuere in, libero bibendum, et adipiscing. <a href='#' id='hue'> You can click here </a>";

      $('button').click(function(){
        $('#content').html(lorum);
      });

      $(function() {
        $('#hue').click(function() {
            $('#content-2').html(lorum); 
        });
      });

    });
  </script>
</head>
 <body>
  <button>Generate</button> <br><br>
<div id="content"></div>
<div id="content-2"></div>
 
</body>
</html> 

您使用的绝对位置会将div放置在相对于其父对象的绝对位置。这意味着所有div都位于同一位置,重叠...