Question

我将屏幕分成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;
}

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

Answer 1

边框会导致div元素的宽度增加，迫使它们进入下一行。您可以通过在margin上指定否定div来说明边框。

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

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

Answer 2

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

这是链接： 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;
}

将屏幕分成4个象限，每个象限都有一个边框

2 个答案: