为什么我的伸缩包装实际上没有将我的物品彼此堆叠？

时间：2018-10-09 03:57:12

标签： html css flexbox

因此，我试图使我的设计更具响应性。 首先是它的样子

[！[在此处输入图片描述] [1]] [1]

当我将浏览器缩小到180px时，我希望所有的小图标都堆叠在一起，但是看起来它隐藏了一些这样的东西

[！[在此处输入图片描述] [2]] [2] 看到一些图标丢失了吗？ 此外，这些图标甚至都不会显示在Firefox上。

html{
    background: #212121;
}
.wrapper {
    margin-top: 15%;
    display: flex;
    justify-content: center; /*center the element*/
    flex-wrap: wrap; /*make them above each other when they cannot fit in one row*/
  }
  
  .divWrapper {
    background-image: url("/images/gear.png");
    height: 600px;
    width: 250px;
    margin: 5%;
  }

  .headSlot{
      content: url("https://vignette.wikia.nocookie.net/2007scape/images/3/35/Head_slot.png/revision/latest?cb=20130227123039");
      width: 45px;
      height: 45px;
      margin-top: 25%;
  }

  .neckSlot{
    content: url("https://vignette.wikia.nocookie.net/2007scape/images/b/b4/Neck_slot.png/revision/latest?cb=20130227122801");
    width: 45px;
    height: 45px;
    margin-left: auto;
}

.arrowSlot{
    content: url("https://vignette.wikia.nocookie.net/2007scape/images/6/64/Ammo_slot.png/revision/latest?cb=20130227122436");
    width: 45px;
    margin-right: auto;
    margin-top: 2%;
}

.capeSlot{
    content: url("https://vignette.wikia.nocookie.net/2007scape/images/b/ba/Cape_slot.png/revision/latest?cb=20130227182819");
    width: 45px;
    height: 45px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2%;
}

.chestSlot{
    content: url("https://vignette.wikia.nocookie.net/2007scape/images/3/33/Torso_slot.png/revision/latest?cb=20130227120231");
    width: 45px;
    margin-top: 2%;
}

.swordSlot{
    content: url("https://vignette.wikia.nocookie.net/2007scape/images/d/d1/Weapon_slot.png/revision/latest?cb=20130227121007");
    width: 45px;
    height: 45px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2%;
}

.shieldSlot{
    content: url("https://vignette.wikia.nocookie.net/2007scape/images/d/d9/Shield_slot.png/revision/latest?cb=20130227123309");
    width: 45px;
    height: 45px;
    
}

.legSlot{
    content: url("https://vignette.wikia.nocookie.net/2007scape/images/2/25/Legs_slot.png/revision/latest?cb=20130227123853");
    width: 45px;
    height: 45px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2%;
}

.feetSlot{
    content: url("https://vignette.wikia.nocookie.net/2007scape/images/b/b0/Boots_slot.png/revision/latest?cb=20130227123356");
    width: 45px;
    margin-top: 2%;
}

.gloveSlot{
    content: url("https://vignette.wikia.nocookie.net/2007scape/images/6/69/Gloves_slot.png/revision/latest?cb=20130227123502");
    width: 45px;
    height: 45px;
}

.ringSlot{
    content: 
    width: 45px;
    height: 45px;
}


.topItems{
    width: 45px;
    height: 45px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2%;
}

.middleItems{
    width: 45px;
    height: 45px;
    margin-left: auto;
}

.bottomItems{
    width: 45px;
    height: 45px;
    margin-left: auto;
    margin-right: auto;
}


@media only screen and (max-width: 180px){
    .topItems{
        width: 45px;
        height: 45px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 2%;
        display: flex;
        flex-wrap: wrap;
    }

    .middleItems{
        width: 45px;
        height: 45px;
        margin-left: auto;
        margin-right: auto;

    }

    .bottomItems{
        width: 45px;
        height: 45px;
        margin-left: auto;
        margin-right: auto;
        flex-wrap: wrap;

    }
}
<body>
    <div class="wrapper">
        <div class="divWrapper">
            <a href="#">
                <section class="headSlot">
                </section>
            </a>


            <div class="topItems">
                <a href="#">
                    <section class="capeSlot">
                    </section>
                </a>
                <a href="#">
                    <section class="neckSlot">
                    </section>
                </a>
                <a href="#">
                    <section class="arrowSlot">
                    </section>
                </a>
            </div>

            <div class="middleItems">
                <a href="#">
                    <section class="swordSlot">
                    </section>
                </a>
                <a href="#">
                    <section class="chestSlot">
                    </section>
                </a>
                <a href="#">
                    <section class="shieldSlot">
                    </section>
                </a>

            </div>


            <a href="#">
                <section class="legSlot">
                </section>
            </a>

            <div class="bottomItems">
                <a href="#">
                    <section class="gloveSlot">
                    </section>
                </a>
                <a href="#">
                    <section class="feetSlot">
                    </section>
                </a>
                <a href="#">
                    <section class="ringSlot">
                    </section>
                </a>
            </div>
        </div>

        <div class="divWrapper">

        </div>
    </div>
    <script src="js/main.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</body>

2 个答案:

答案 0 :(得分：1)

在以下180px媒体查询中仅将height: auto;设置为topItems，middleItems和bottomItems 

html{
    background: #212121;
}
.wrapper {
    margin-top: 15%;
    display: flex;
    justify-content: center; /*center the element*/
    flex-wrap: wrap; /*make them above each other when they cannot fit in one row*/
  }
  
  .divWrapper {
    background-image: url("/images/gear.png");
    height: 600px;
    width: 250px;
    margin: 5%;
  }

  .headSlot{
      content: url("https://vignette.wikia.nocookie.net/2007scape/images/3/35/Head_slot.png/revision/latest?cb=20130227123039");
      width: 45px;
      height: 45px;
      margin-left: auto;
      margin-right: auto;
      margin-top: 25%;
  }

  .neckSlot{
    content: url("https://vignette.wikia.nocookie.net/2007scape/images/b/b4/Neck_slot.png/revision/latest?cb=20130227122801");
    width: 45px;
    height: 45px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2%;
}

.arrowSlot{
    content: url("https://vignette.wikia.nocookie.net/2007scape/images/6/64/Ammo_slot.png/revision/latest?cb=20130227122436");
    width: 45px;
    height: 45px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2%;
}

.capeSlot{
    content: url("https://vignette.wikia.nocookie.net/2007scape/images/b/ba/Cape_slot.png/revision/latest?cb=20130227182819");
    width: 45px;
    height: 45px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2%;
}

.chestSlot{
    content: url("https://vignette.wikia.nocookie.net/2007scape/images/3/33/Torso_slot.png/revision/latest?cb=20130227120231");
    width: 45px;
    height: 45px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2%;
}

.swordSlot{
    content: url("https://vignette.wikia.nocookie.net/2007scape/images/d/d1/Weapon_slot.png/revision/latest?cb=20130227121007");
    width: 45px;
    height: 45px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2%;
}

.shieldSlot{
    content: url("https://vignette.wikia.nocookie.net/2007scape/images/d/d9/Shield_slot.png/revision/latest?cb=20130227123309");
    width: 45px;
    height: 45px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2%;
}

.legSlot{
    content: url("https://vignette.wikia.nocookie.net/2007scape/images/2/25/Legs_slot.png/revision/latest?cb=20130227123853");
    width: 45px;
    height: 45px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2%;
}

.feetSlot{
    content: url("https://vignette.wikia.nocookie.net/2007scape/images/b/b0/Boots_slot.png/revision/latest?cb=20130227123356");
    width: 45px;
    height: 45px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2%;
}

.gloveSlot{
    content: url("https://vignette.wikia.nocookie.net/2007scape/images/6/69/Gloves_slot.png/revision/latest?cb=20130227123502");
    width: 45px;
    height: 45px;
}

.ringSlot{
    content: url("https://vignette.wikia.nocookie.net/2007scape/images/9/9f/Ring_slot.png/revision/latest?cb=20130227123624");
    width: 45px;
    height: 45px;
}


.topItems{
    width: 45px;
    height: 45px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2%;
    display: flex;
    flex-direction: row;
    justify-content: center; 
}

.middleItems{
    width: 45px;
    height: 45px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2%;
    display: flex;
    flex-direction: row;
    justify-content: center; 
}

.bottomItems{
    width: 45px;
    height: 45px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2%;
    display: flex;
    flex-direction: row;
    justify-content: center; 
}


@media only screen and (max-width: 180px){
    .topItems{
        width: 45px;
        height: auto;
        margin-left: auto;
        margin-right: auto;
        margin-top: 2%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
    }

    .middleItems{
        width: 45px;
        height: auto;
        margin-left: auto;
        margin-right: auto;
        margin-top: 2%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;

    }

    .bottomItems{
        width: 45px;
        height: auto;
        margin-left: auto;
        margin-right: auto;
        margin-top: 2%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;

    }
}
<body>
    <div class="wrapper">
        <div class="divWrapper">
            <a href="#">
                <section class="headSlot">
                </section>
            </a>


            <div class="topItems">
                <a href="#">
                    <section class="capeSlot">
                    </section>
                </a>
                <a href="#">
                    <section class="neckSlot">
                    </section>
                </a>
                <a href="#">
                    <section class="arrowSlot">
                    </section>
                </a>
            </div>

            <div class="middleItems">
                <a href="#">
                    <section class="swordSlot">
                    </section>
                </a>
                <a href="#">
                    <section class="chestSlot">
                    </section>
                </a>
                <a href="#">
                    <section class="shieldSlot">
                    </section>
                </a>

            </div>


            <a href="#">
                <section class="legSlot">
                </section>
            </a>

            <div class="bottomItems">
                <a href="#">
                    <section class="gloveSlot">
                    </section>
                </a>
                <a href="#">
                    <section class="feetSlot">
                    </section>
                </a>
                <a href="#">
                    <section class="ringSlot">
                    </section>
                </a>
            </div>
        </div>

        <div class="divWrapper">

        </div>
    </div>
    <script src="js/main.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</body>

答案 1 :(得分：0)

在媒体查询中的css属性下方删除：

display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;

相同，我在代码片段中进行了更新。希望这会有所帮助：）

html {
  background: #212121;
}

.wrapper {
  margin-top: 15%;
  display: flex;
  justify-content: center;
  /*center the element*/
  flex-wrap: wrap;
  /*make them above each other when they cannot fit in one row*/
}

.divWrapper {
  background-image: url("/images/gear.png");
  height: 600px;
  width: 250px;
  margin: 5%;
}

.headSlot {
  content: url("https://vignette.wikia.nocookie.net/2007scape/images/3/35/Head_slot.png/revision/latest?cb=20130227123039");
  width: 45px;
  height: 45px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 25%;
}

.neckSlot {
  content: url("https://vignette.wikia.nocookie.net/2007scape/images/b/b4/Neck_slot.png/revision/latest?cb=20130227122801");
  width: 45px;
  height: 45px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2%;
}

.arrowSlot {
  content: url("https://vignette.wikia.nocookie.net/2007scape/images/6/64/Ammo_slot.png/revision/latest?cb=20130227122436");
  width: 45px;
  height: 45px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2%;
}

.capeSlot {
  content: url("https://vignette.wikia.nocookie.net/2007scape/images/b/ba/Cape_slot.png/revision/latest?cb=20130227182819");
  width: 45px;
  height: 45px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2%;
}

.chestSlot {
  content: url("https://vignette.wikia.nocookie.net/2007scape/images/3/33/Torso_slot.png/revision/latest?cb=20130227120231");
  width: 45px;
  height: 45px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2%;
}

.swordSlot {
  content: url("https://vignette.wikia.nocookie.net/2007scape/images/d/d1/Weapon_slot.png/revision/latest?cb=20130227121007");
  width: 45px;
  height: 45px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2%;
}

.shieldSlot {
  content: url("https://vignette.wikia.nocookie.net/2007scape/images/d/d9/Shield_slot.png/revision/latest?cb=20130227123309");
  width: 45px;
  height: 45px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2%;
}

.legSlot {
  content: url("https://vignette.wikia.nocookie.net/2007scape/images/2/25/Legs_slot.png/revision/latest?cb=20130227123853");
  width: 45px;
  height: 45px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2%;
}

.feetSlot {
  content: url("https://vignette.wikia.nocookie.net/2007scape/images/b/b0/Boots_slot.png/revision/latest?cb=20130227123356");
  width: 45px;
  height: 45px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2%;
}

.gloveSlot {
  content: url("https://vignette.wikia.nocookie.net/2007scape/images/6/69/Gloves_slot.png/revision/latest?cb=20130227123502");
  width: 45px;
  height: 45px;
}

.ringSlot {
  content: url("https://vignette.wikia.nocookie.net/2007scape/images/9/9f/Ring_slot.png/revision/latest?cb=20130227123624");
  width: 45px;
  height: 45px;
}

.topItems {
  width: 45px;
  height: 45px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2%;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.middleItems {
  width: 45px;
  height: 45px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2%;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.bottomItems {
  width: 45px;
  height: 45px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2%;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

@media only screen and (max-width: 180px) {
      .topItems{
    width: 45px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2%;
	display:block;
}

.middleItems{
    width: 45px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2%;
	display:block;

}

.bottomItems{
    width: 45px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2%;
	display:block;

}
}
<div class="wrapper">
  <div class="divWrapper">
    <a href="#">
      <section class="headSlot">
      </section>
    </a>


    <div class="topItems">
      <a href="#">
        <section class="capeSlot">
        </section>
      </a>
      <a href="#">
        <section class="neckSlot">
        </section>
      </a>
      <a href="#">
        <section class="arrowSlot">
        </section>
      </a>
    </div>

    <div class="middleItems">
      <a href="#">
        <section class="swordSlot">
        </section>
      </a>
      <a href="#">
        <section class="chestSlot">
        </section>
      </a>
      <a href="#">
        <section class="shieldSlot">
        </section>
      </a>

    </div>


    <a href="#">
      <section class="legSlot">
      </section>
    </a>

    <div class="bottomItems">
      <a href="#">
        <section class="gloveSlot">
        </section>
      </a>
      <a href="#">
        <section class="feetSlot">
        </section>
      </a>
      <a href="#">
        <section class="ringSlot">
        </section>
      </a>
    </div>
  </div>

  <div class="divWrapper">

  </div>
</div>
<script src="js/main.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

相关问题
最新问题