1

我需要使用 html 和 css 绘制类似的东西。我不能这样做。

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

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

4

3 回答 3

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>
于 2012-08-16T22:57:40.050 回答
2

使用绝对定位在这里看小提琴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;
}​
于 2012-08-16T22:55:26.700 回答
0

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

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;
}
​
于 2012-08-16T23:02:55.083 回答