Question

我想将CSS添加到DIV元素，这样我就可以将它对齐到右边，并在其左侧直接创建一个表单。我正在制作一个2048的黑客版本。我的HTML代码是：

    <div id="completetwentyfourtyeightgame" align="right">
        <div class="container">
            <div class="heading">
                <div class="scores-container">
                    <div class="score-container">0</div>
                    <div class="best-container">0</div>
                </div>
                <div class="above-game">
                    <a class="restart-button">New Game</a>
                </div>
            </div>
            <div class="game-container">
                <div class="game-message">
                    <p></p>
                    <div class="lower">
                        <a class="keep-playing-button">Keep going</a>
                        <a class="retry-button">Try again</a>
                    </div>
                </div>
                <div class="grid-container">
                    <div class="grid-row">
                        <div class="grid-cell"></div>
                        <div class="grid-cell"></div>
                        <div class="grid-cell"></div>
                        <div class="grid-cell"></div>
                    </div>
                    <div class="grid-row">
                        <div class="grid-cell"></div>
                        <div class="grid-cell"></div>
                        <div class="grid-cell"></div>
                        <div class="grid-cell"></div>
                    </div>
                    <div class="grid-row">
                        <div class="grid-cell"></div>
                        <div class="grid-cell"></div>
                        <div class="grid-cell"></div>
                        <div class="grid-cell"></div>
                    </div>
                    <div class="grid-row">
                        <div class="grid-cell"></div>
                        <div class="grid-cell"></div>
                        <div class="grid-cell"></div>
                        <div class="grid-cell"></div>
                    </div>
                </div>
                <div class="tile-container"></div>
            </div>
        </div>
    </div>

        <div align="left">
        <form id="inputs">
            <table border="1">
                <tr>
                    <th>Tile Value 1</th>
                </tr>
                <tr>
                    <th>
                        <input type="text" id="tilevalueone" value="2">
                    </th>
                </tr>
                <tr>
                    <th>Tile Value 2</th>
                </tr>
                <tr>
                    <th>
                        <input type="text" id="tilevaluetwo" value="4">
                    </th>
                </tr>
                <tr>
                    <th>Starting Score</th>
                </tr>
                <tr>
                    <th>
                        <input type="text" id="score" value="0">
                    </th>
                </tr>
                <tr>
                    <th>Tile Value To Win</th>
                </tr>
                <tr>
                    <th>
                        <input type="text" id="winpoints" value="2048">
                    </th>
                </tr>
            </table>
        </form>
    </div>

我的css是：

.completetwentyfourtyeightgame{
position: absolute;
right: 0px;
}

代码有什么问题？它在我的HTML或我的CSS中吗？以下是代码正在执行的操作的屏幕截图：

桌子不在左边，而是右边的游戏，而是在桌子下面。 After changing the . to a # in the css, this happens

如果网站和桌子紧挨着游戏的左边界，我不希望游戏处于边缘。另外，有没有办法让javascript重新加载游戏以应用值而无需重新加载页面本身？

Answer 1

应该是：

CSS中的

#completetwentyfourtyeightgame。

您将其作为.completetwentyfourtyeightgame

这是因为.启动它，就是表示一个新的CSS类。要定位具有id的内容 - 正如您在HTML中声明的那样 - 您需要使用#

Answer 2

#completetwentyfourtyeightgame{
  float: right;
}

# = id选择器 . =类选择器

我认为float比position: absolute更好用。如果可以的话，你通常希望远离绝对定位

#completetwentyfourtyeightgame{
  float: right;
}

<div id="completetwentyfourtyeightgame" align="right">
    <div class="container">
        <div class="heading">
            <div class="scores-container">
                <div class="score-container">0</div>
                <div class="best-container">0</div>
            </div>
            <div class="above-game">
                <a class="restart-button">New Game</a>
            </div>
        </div>
        <div class="game-container">
            <div class="game-message">
                <p></p>
                <div class="lower">
                    <a class="keep-playing-button">Keep going</a>
                    <a class="retry-button">Try again</a>
                </div>
            </div>
            <div class="grid-container">
                <div class="grid-row">
                    <div class="grid-cell"></div>
                    <div class="grid-cell"></div>
                    <div class="grid-cell"></div>
                    <div class="grid-cell"></div>
                </div>
                <div class="grid-row">
                    <div class="grid-cell"></div>
                    <div class="grid-cell"></div>
                    <div class="grid-cell"></div>
                    <div class="grid-cell"></div>
                </div>
                <div class="grid-row">
                    <div class="grid-cell"></div>
                    <div class="grid-cell"></div>
                    <div class="grid-cell"></div>
                    <div class="grid-cell"></div>
                </div>
                <div class="grid-row">
                    <div class="grid-cell"></div>
                    <div class="grid-cell"></div>
                    <div class="grid-cell"></div>
                    <div class="grid-cell"></div>
                </div>
            </div>
            <div class="tile-container"></div>
        </div>
    </div>
</div>

    <div align="left">
    <form id="inputs">
        <table border="1">
            <tr>
                <th>Tile Value 1</th>
            </tr>
            <tr>
                <th>
                    <input type="text" id="tilevalueone" value="2">
                </th>
            </tr>
            <tr>
                <th>Tile Value 2</th>
            </tr>
            <tr>
                <th>
                    <input type="text" id="tilevaluetwo" value="4">
                </th>
            </tr>
            <tr>
                <th>Starting Score</th>
            </tr>
            <tr>
                <th>
                    <input type="text" id="score" value="0">
                </th>
            </tr>
            <tr>
                <th>Tile Value To Win</th>
            </tr>
            <tr>
                <th>
                    <input type="text" id="winpoints" value="2048">
                </th>
            </tr>
        </table>
    </form>
</div>

将CSS分配给<div>元素

2 个答案: