有css和divs布局的麻烦。还有什么工具..？

Question

我一直试图获得一个目标布局，如下面的模型所示。我现在已经工作了几个小时了，我无法做到这一点。我正在使用Notepad ++，它可能不是图形布局的正确工具。这只是一个网页游戏的一次性页面，只有一个页面和相对简单的布局（我认为）。 （顺便说一句我添加边框只是为了看到每个方块的颜色，但最终结果中不需要它们）

这是我到目前为止所得到的：http://jsfiddle.net/2kLSV/

也许我使用了太多嵌套的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>

这是预期结果的模型

Answer 1

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

http://jsfiddle.net/2kLSV/1/

<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="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>
            <br style="clear:both" />
        </div>
        <div id="overlay"></div>
    </div>

</div>

Answer 2

尝试这段代码，它正在为我工​​作

picture demo

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

CSS代码

/* 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;
}