css和divs布局有问题。还有什么工具。。？

我一直在尝试得到一个目标布局，如下图所示。我已经做了好几个小时了，我就是不能完全正确。我正在使用记事本+，它可能不是用于图形布局的合适工具。这只是一个网络游戏的一次性页面，只有一个页面和相对简单的布局（我想）。（顺便说一句，我添加边框只是为了查看每个正方形的颜色，但在最终结果中不需要它们）

以下是到目前为止我得到的信息：

可能我使用了太多的嵌套div或其他东西

<div class="infos">
            <div class="infos-players">

                <div class="infos-players-name">
                    <div class="icon-cross"></div>
                    <div id="player1-name">Player 1</div>
                    <div id="player1-arrow"></div>
                </div>

                <div class="infos-players-score" id="player1-score">101</div>

                <div class="infos-players-name">
                    <div class="icon-naught"></div>
                    <div id="player2-name">Player 2</div>
                    <div id="player2-arrow"></div>
                </div>

                <div class="infos-players-score" id="player2-score">202</div>

            </div>
            <div class="infos-round">Round
                <br />123</div>
        </div>

玩家1
101
玩家2
202
圆形的

123

这是预期结果的模型

---

试试这个，应该更像你想要的。我调整了一点CSS，并添加了一个清晰的修复程序，以使橙色边框正确地包含所有内容：

连续四个
加载。。。
玩家1
101
玩家2
202
圆形的

123

试试这个代码它对我有用

HTML

<div id="page">
        <h1>Four in a row</h1>

    <div id="game-zone">
        <div class="cf" id="board">
            <div class="loading">Loading...</div>
        </div>
        <div class="infos">
            <div class="infos-players">

                <div class="infos-players-name">
                    <div class="icon-cross"></div>
                    <div id="player1-name">Player 1</div>
                    <div id="player1-arrow"></div>
                </div>

                <div class="infos-players-score" id="player1-score">101</div>
                <div class="clear"></div>
                <div class="infos-players-name">
                    <div class="icon-naught"></div>
                    <div id="player2-name">Player 2</div>
                    <div id="player2-arrow"></div>
                </div>

                <div class="infos-players-score" id="player2-score">202</div>

            </div>
            <div class="infos-round">Round
                <br />123</div>
        </div>

        <div id="overlay"></div>
    </div>
</div>

<div id="page">
        <h1>Four in a row</h1>

    <div id="game-zone">
        <div class="cf" id="board">
            <div class="loading">Loading...</div>
        </div>
        <div class="infos">
            <div class="infos-players">

                <div class="infos-players-name">
                    <div class="icon-cross"></div>
                    <div id="player1-name">Player 1</div>
                    <div id="player1-arrow"></div>
                </div>

                <div class="infos-players-score" id="player1-score">101</div>
                <div class="clear"></div>
                <div class="infos-players-name">
                    <div class="icon-naught"></div>
                    <div id="player2-name">Player 2</div>
                    <div id="player2-arrow"></div>
                </div>

                <div class="infos-players-score" id="player2-score">202</div>

            </div>
            <div class="infos-round">Round
                <br />123</div>
        </div>

        <div id="overlay"></div>
    </div>
</div>

/* infos */
.infos:after
{
    content:"";
    display:block;
    clear:both;
}
.infos {

    -moz-box-sizing: border-box;

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

    padding: 1% 1% 1% 1%;

    font: bold 1em'uni', Arial, sans-serif;

    background-color: #f80;
    float:left;
    width:100%;
}

.infos-players {

    float: left;

    width: 70%;

    background-color: #ff0;

    padding: 1% 1% 1% 1%;
}

.infos-players-name {

    float: left;

    width: 40%;

    background-color: #f00;

    padding: 1% 1% 1% 1
        margin-bottom:5px;
}

.infos-players-score {

    float: right;

    width: 40%;

    background-color: #0f0;

    padding: 1% 1% 1% 1%;
    margin-bottom:5px;
}

.infos-round {

    float: left;

    text-align: center;

    width: 25%;

    background-color: #08F;
    margin-left:3px;
    padding: 1% 1% 1% 1%;
}

.icon-cross {

    float: left;

    background-image: url("../images/icons.png");

    background-size: 500% 100%;

    background-position: 0 0;

    background-repeat: no-repeat;

    width: 1.5em;

    height: 1.5em;

}

.icon-naught {

    float: left;

    background-image: url("../images/icons.png");

    background-size: 500% 100%;

    background-position: 25% 0;

    background-repeat: no-repeat;

    width: 1.5em;

    height: 1.5em;

}

.icon-starwin {

    float: right;

    background-image: url("../images/icons.png");

    background-size: 500% 100%;

    background-position: 50% 0;

    background-repeat: no-repeat;

    width: 1.5em;

    height: 1.5em;

}

.icon-starempty {

    float: right;

    background-image: url("../images/icons.png");

    background-size: 500% 100%;

    background-position: 75% 0;

    background-repeat: no-repeat;

    width: 1.5em;

    height: 1.5em;

}

.icon-arrow {

    float: left;

    background-image: url("../images/icons.png");

    background-size: 500% 100%;

    background-position: 100% 0;

    background-repeat: no-repeat;

    width: 1.5em;

    height: 1.5em;

}
.clear
{
    clear:both;
}