0

コンピューターとじゃんけんができる基本的なサイトをデザインしています。機能は完全に機能しているので、ページのフォーマットを微調整する必要があります。

ゲームをプレイするというアイデアが好きです。ゲームの後に、メッセージと再開するボタンが表示され、ページの中央に配置する必要があります。現在、これらは実際のゲームを保持しているラッパーの右側に表示されています。

これが私の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を別のページで使用しましたが、下部のボタンとメッセージに対して希望どおりに機能するため、これがどのように機能しないかについてはかなり困惑しています。エラーを見つけたり、何か他のものがある場合は、私に知らせてください

4

1 に答える 1

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>
于 2012-12-07T23:44:14.617 に答える