Question

我遇到问题让div扩展，以便两个div不相互重叠。我得到了正确的位置我希望div和除了我想要“100％所有牛肉weenies”出现在项目下面的所有东西。任何有关这方面的见解将不胜感激。我在想我需要一个围绕两个内部div的外部div，但我不确定这是否是我需要采取的正确路线。

以下是我的代码：

    <div class="page2">
      <h2 class="wegottheweenies">WE GOT THE WEENIES</h2>
        <div class="weeniespaper">
          <div class="paperitems">

          </div>
        </div>

    </div>
  </div>
</body>
<script>
  $.getJSON("../json/weenies.json", function (data) {
      for(var i = 0; i < data.length; i++){
         $('.weeniespaper').append('<div class="items"><p class="itemTitle">' + data[i].item  +'<p class="itemPrice"> ' + data[i].price + '</p>'+
         '</p><p class="itemDescription">' + data[i].Description + '</div>');
      }
      $('.paperitems').append('<div class="allbeef"><p id="allbeefweenies">100% ALL BEEF Weenies</p></div>')

  });
</script>

以下是与之相关的CSS：

.weeniespaper{
        background-image: url('../pictures/weenies/longpaper.png');
        height: auto;
        column-count: 2;
        column-fill: balance;
        background-repeat: repeat-y;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        position: relative;
        top: 15vh;
        margin-left: auto;
        margin-right: auto;
        width: 85%;
        bottom: 20vh;
      }

      .items{

        width: 95%;
        margin-left: 30px;
        font-size: 1.150em;
        margin-top: 10px;
        margin-bottom: -15px;
      }

      .itemTitle{
        font-weight: bold;
        float: left;
        width: 80%;
      }
      .itemPrice{
        float: left;
        width: 15%;
      }

      .itemDescription{
        margin-right: 30px;
      }

      .items{
        width: 85%;
      }
      h2{
              /font-family: 'Patrick Hand', cursive;/
              /display:inline-block;/
              width:90%;
              font-family: 'Amatic SC', cursive;
              background-image: url('../pictures/subs/woodLabel.png');
              font-size: 4em;
              letter-spacing: .2em;
              color: yellow;
              text-shadow: 4px 4px black;
              text-align: center;
              margin: 0;
              margin-left: 10%;
              -webkit-background-size: cover;
              -moz-background-size: cover;
              -o-background-size: cover;
              background-size: cover;
              margin-top: 25px;
          }

      .wegottheweenies{
        position: relative;
        top: 5vh;
        margin: 0 auto;
        height: 10vh;
        width: 65%
        text-align: center;
      }



      #allbeefweenies{
        position: absolute;
        font-weight: bold;
        padding-left: 30px;
        font-size: 1.125em;
        left: 0;
        bottom: 0;
      }

Answer 1

没关系，只是我添加了另一个和div并稍微改变了css。搞定了。

扩展flexbox div，以便在我追加div时可以扩展

1 个答案: