1

我已将屏幕分成 4 个象限。 

<html>
    <head>
        <link rel="stylesheet" href="test.css" />
    </head>
    <body>
        <div class="aqua pull-left"></div>

        <div class="blue pull-right" ></div>

        <div class="green pull-left bottom"></div>

        <div class="tan pull-right bottom"></div>
    </body>
</html>

这是我的CSS：

html, body {
    padding: 0;
    margin: 0;
    height: 100%;
    min-height: 100%;
    background: black;
}

div {
    width: 50%;
    height: 50%;
}

.pull-left {
    float: left;
}

.pull-right {
    float: right;
}

我想在我的每个方块周围都有一个黑色边框。当我添加边框时，我的方块垂直排列，同时在屏幕的左侧和右侧交替。我知道这是一个简单的修复，但已经坚持了一段时间。任何帮助都会很棒。谢谢。

4

2 回答 2

2

边框导致div元素的宽度增加，迫使它们进入下一行。您可以通过margin在div.

div {
    width: 50%;
    height: 50%;
    border: 1px solid black;
    margin: 0px -1px;
}

工作示例 http://jsfiddle.net/zB3zf/

于 2013-05-01T09:34:50.083 回答
0

我改进了一点你的代码，但是你需要准确地定义你需要的东西。

这是链接：http: //jsfiddle.net/NMbbS/5/

CSS：

    html, body {
    padding: 0;
    margin: 0;
    height: 100%;
    min-height: 100%;
    background: black;
}

div {
    width: 48%;
    height: 50%;
    border:1%;
    border: solid #a1a1a1;
}

.pull-left {
    float: left;
}

.pull-right {
    float: right;
}
于 2013-05-01T09:37:38.283 回答