Html 插入一个div将设置另一个div'；s高度为0

我有一组div：

<div id="instructions"></div>
    <div id="scratchcards">
        <div class="card" id="firstCard"></div>
        <div class="card" id="secondCard"></div>
        <div class="card" id="thirdCard"></div>
        <div class="card" id="fourthCard"></div>
        <div class="card" id="fifthCard"></div>
        <div class="card" id="sixthCard"></div>
    </div>
    <div id="whole" style="display:none; text-align:left; margin-left:5px; margin-right: 5px; padding:0; overflow: auto;">
        <center><h3 style="margin:0; padding:0">text<script>document.write(getURLParameter("city"))</script> :<br>
        <span style="color:#5342f4">text</span></h3>
        <img img src="ss2.jpg" style="margin-top:5px; margin-bottom: 0px; position: relative;">
        <br><a href="alink.link" class="button"> text </a>
        </center>
        <b>Notice:</b>text
        <br><b>text</b><br><br>
        <b> <span style="color:">Step 1:</span></b> text</br></br>
        <b> <span style="color:">Step 2:</span></b> text</br></br>
        <b> <span style="color:">Step 3:</span></b> text
        <hr style="width:80%">
        <p style="margin:0;padding:0; position: relative; margin-left: 0px; margin-top: 5px;"> <span style="font-size: 28px; font-weight: bold; color:black"> text </span><br>
        <img src="girl1.jpg" style="display:inline-block; vertical-align:middle;border-radius: 50%"><span style="font-size: 18px; font-weight:bold;"> text </span>
        <br><span style="">text</span>
        <br><img style="padding:5px;" src="sample1.png">
        <br><img src="girl4.jpg" style="display:inline-block; vertical-align:middle; border-radius: 50%"><span style="font-size: 18px; font-weight:bold;"> text </span>
        <br><span style="margin-left:0px;">text;  </span>
        <br>
        <img src="guy6.jpg" style="display:inline-block; vertical-align:middle; border-radius: 50%; padding-top:8px;"><span style="font-size: 18px; font-weight:bold;"> text </span>
        <br><span style="">text </span>
        <br><img style="padding:5px;" src="test.png"><br>
        <img src="guy5.jpg" style="display:inline-block; vertical-align:middle; border-radius: 50%"><span style="font-size: 18px; font-weight:bold;"> text </span>
        <br><span style="margin-left:0px;">text</span>
        <br>
        <img src="guy8.jpg" style="display:inline-block; vertical-align:middle; border-radius: 50%; padding-top:8px;"><span style="font-size: 18px; font-weight:bold;"> text </span>
        <br><span style="">text </span>
        <br><img style="padding:5px;" src="ps4.jpg"><br>
        <img src="girl2.jpg" style="display:inline-block; vertical-align:middle; border-radius: 50%;"><span style="font-size: 18px; font-weight:bold;"> text </span>
        <br><span style="">text</span>
        <br><img style="padding:5px;" src="ps42.jpg"><br>
        <center><span style="font-weight:bold;"> Post your comment</span></center>
        <div class="addCommentBox">
        <textarea name="comment" class="commentTextBox"></textarea>
        <br>
        <input type="button" onclick="alert('Thank you for your comment, it will be published after being reviewed.')" value="Comment">
        </div>

页面加载时，显示第一张卡到第三张卡，隐藏第四张卡到第六张卡。用户使用scratch.js文件刮掉图像以显示卡后面的内容。显示警报后，页面将显示接下来的3张卡。问题就出在这里： 当我尝试显示第二组卡片时，div的高度设置为0。移除“整体”可消除此问题

更奇怪的是，如果我在页面加载失败后刷新页面，它就可以正常工作了。如果我在另一个窗口打开它，它就可以正常工作。此操作唯一失败的时间是首次在浏览器中打开页面时。

---

为了节省阅读时间，这些div中没有一个调用float命令或absolute。

其中有一些味道文本，但在一个匿名窗口中打开此链接是的，这就是问题所在，并且它们没有全部设置为display:none。单击“再次旋转”按钮时，第四、第五和第六张卡设置为显示：内联块。问题是，调用.show（）命令时，height的element.style设置为0。

body { text-align: center; height: 100%; }
        #instructions { text-align: center; color: #444; font-size: 1.2em; text-transform: uppercase; padding-top: 40px; cursor: pointer; }
        #firstCard, #secondCard, #thirdCard{ display: inline-block; vertical-align: middle; width:30%; height: auto; overflow: hidden; }
        #fourthCard, #fifthCard, #sixthCard { display: inline-block; vertical-align: middle; width:30%; height: auto; overflow: hidden; }
        .disabled { opacity: 0.5; }
        .card {width:30%; }