我在使div扩展到使两个div彼此不重叠方面遇到问题。我希望在div和其他所有内容上得到正确的定位,除了我希望“ 100%所有牛肉肠”显示在项目下方。任何对此的见解将不胜感激。我以为我需要围绕两个内部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;
      }

最佳答案

没关系,只是我添加另一个和div并稍微更改了CSS。得到它的工作。

09-20 23:57