html - 使用 CSS 在 HTML 页面上的格式不正确

Question

我正在设计一个基本站点，您可以在其中对着计算机玩剪刀石头布。该功能运行良好，现在我只需要调整页面的格式。

我喜欢玩游戏的想法，然后在游戏结束后下方会出现一条消息和重新开始的按钮，并且应该位于页面下方的中央。目前，这些显示在我的 wrapper 的右侧，里面装有实际游戏。

这是我的 htm:div 和按钮位于底部:

<div id="wrapper">
        <div id="left" class="column">
                <h2>User</h2>
                <div id="userchoice">
                </div>
        </div>
        <div id="middle" class="column">
                <h2>VS.</h2>

        </div>
        <div id="right" class="column">
                <h2>Rock Paper Scissors</h2>
                <div id="computerchoice">
                </div>
        </div>
</div>

</br></br>

<div>
        <p id="result"></p>
</div>
</br>
<button  onclick="playAgain()" id="playagain" class="ui-button ui-widget ui-state-default ui-corner-all">Play Again?</button>
</br>
</br>

和我的CSS:

   body
    {
            text-align: center;
            font-family: Verdana, Arial, sans-serif;
            font-size: 1em;
    }
     #wrapper {
                /*border: 2px solid black;*/
                width: 1015px;
                margin-left: auto;
                margin-right: auto;
        }
        #header {
                text-align: center;
        }

        /* 300px content + 20px = 320px physical width per column */
        .column {
                float: left;
                width: 325px;
                margin: 5px;
                text-align: center;
                min-height: 250px;
        }
        /* The middle column adds 4px of border to its physical width */
        #middle {
                /*border-left: 2px solid black;
                border-right: 2px solid black;*/
                margin-left: 0;
                margin-right: 0;
                padding-left: 10px;
                padding-right: 10px;
        }

        /* CSS Clear Hack: apply this to the containing element. */
        .group:before,
        .group:after {
                content:"";
                display:table;
        }
        .group:after {
                clear:both;
        }
        .group {
                zoom:1; /* For IE 6/7 (trigger hasLayout) */
        }

我在另一个页面上使用了这个 css，它的功能与我想要的按钮和底部的消息一样，所以我很困惑它为什么不起作用。如果您发现错误或有其他我可能会尝试的方法，请告诉我

Answer 1

添加一个清晰的 div 以清除高度，因为您有 float 元素。

   <div id="wrapper">
            <div id="left" class="column">
                    <h2>User</h2>
                    <div id="userchoice">
                    </div>
        </div>
        <div id="middle" class="column">
                <h2>VS.</h2>

        </div>
        <div id="right" class="column">
                <h2>Rock Paper Scissors</h2>
                <div id="computerchoice">
                </div>
            </div>
    <!-- clear here -->
    <div class="clear" style="clear:both;"></div>
    </div>