Question

我需要使用html和css绘制这样的东西。我无法这样做。

          _____________________
          |      |      |     |  
          |______|      |_____|
          |                   |  
          |______        _____|
          |      |       |    |
          |______|_______|____|

我创建了一个主要的div，一个外部矩形，然后创建了4个嵌套的div，更小的矩形。对于左侧2我使它们向左浮动而另外2向右浮动。但这不是我想要的东西。有人可以告诉我应该做些什么。

Answer 1

使用绝对定位请参见此处http://jsfiddle.net/NPALD/

<div id="outer">
    <div id="NW"></div>
    <div id="NE"></div>
    <div id="SW"></div>
    <div id="SE"></div>
</div>

#outer
{
    width:300px;
    height: 300px;
    border:solid 1px red;
    position: relative;
}
#NW, #NE, #SW, #SE {
    position: absolute;
    width: 100px;
    height: 100px;
    border: solid 1px green;
}
#NW
{
    top: 0;
    left: 0;
}
#NE
{
    top: 0;
    right: 0;
}
#SW
{
    bottom: 0;
    left: 0;
}
#SE
{
    bottom: 0;
    right: 0;
}

Answer 2

你需要使用绝对定位来实现这一目标。每个内部div的绝对位置将top，left，right或bottom中的两个设置为0。

以下是一个例子：

<html>
    <head>
        <title>CSS Based layouts</title>

        <style type="text/css">
            #rect {
              width: 300px;
                height: 300px;
                position: relative;
              border: 1px solid black;
            }

            #topleft {
              position: absolute;
              top: 0;
                left: 0;
              border: 1px solid black;
            }

            #bottomleft {
              position: absolute;
              bottom: 0;
                left: 0;
              border: 1px solid black;
            }

            #topright {
              position: absolute;
              top: 0;
                right: 0;
              border: 1px solid black;
            }

            #bottomright {
              position: absolute;
              bottom: 0;
                right: 0;
              border: 1px solid black;
            }

        </style>

    </head>
    <body>
        <h1>CSS Based layouts</h1>
        <p></p>

        <div id="rect">

            <div id="topleft">
                Top and Left
            </div>
            <div id="bottomleft">
                Bottom and Left
            </div>
            <div id="topright">
                Top and Right
            </div>
            <div id="bottomright">
                Bottom and Right
            </div>

        </div>

    </body>
</html>

Answer 3

您的布局似乎是表格式的，所以让我们试试表格：

http://jsfiddle.net/cvTak/2/

<table>
    <tr>
        <td class="t l">Top Left</td>
        <td class="t r">Top Right</td>
    </tr>
    <tr>
        <td class="b l">Bottom Left</td>
        <td class="b r">Bottom Right</td>
     </tr>
</table>

table {
    border-collapse: collapse;
    border: 1px solid blue;
}
td {
    width: 100px;
    height: 100px;
}
.l {
    border-right: 100px solid yellow;
}

.t {
    border-bottom: 100px solid yellow;
}

将div细分为4个div并将它们定位在NE，SE，NW和SW方向

3 个答案: