Question

我正在设计一个基本网站，您可以在计算机上玩石头剪刀。功能完美，现在我只需要调整页面的格式。

我喜欢拥有游戏的想法，然后在游戏之后，会显示一条消息和重启按钮，并且应该在页面下方居中。目前，这些显示在我的包装器右侧，持有实际游戏。

这是我的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以清除高度，因为您已浮动元素。

   <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>

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

1 个答案: