Html 将一个div细分为另外4个div，并将其定位在NE、SE、NW和SW方向_Html_Css

Html 将一个div细分为另外4个div，并将其定位在NE、SE、NW和SW方向

html css

Html 将一个div细分为另外4个div，并将其定位在NE、SE、NW和SW方向,html,css,Html,Css,我需要使用html和css绘制类似的内容。我不能这样做 _____________________ | | | | |______| |_____| | | |______ _____| | | | | |______|_______|

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

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

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

使用绝对定位，请看这里的小提琴



#外
{
宽度：300px；
高度：300px；
边框：实心1px红色；
位置：相对位置；
}
#西北、东北、西南、东南{
位置：绝对位置；
宽度：100px；
高度：100px；
边框：实心1px绿色；
}
#西北
{
排名：0；
左：0；
}
#东北
{
排名：0；
右：0；
}
#西南
{
底部：0；
左：0；
}
#硒
{
底部：0；
右：0；
}

使用绝对定位，请参见此处的小提琴



#外
{
宽度：300px；
高度：300px；
边框：实心1px红色；
位置：相对位置；
}
#西北、东北、西南、东南{
位置：绝对位置；
宽度：100px；
高度：100px；
边框：实心1px绿色；
}
#西北
{
排名：0；
左：0；
}
#东北
{
排名：0；
右：0；
}
#西南
{
底部：0；
左：0；
}
#硒
{
底部：0；
右：0；
}

您需要使用绝对定位来实现这一点。每个内部div的绝对位置将有两个

顶部

，

左侧

，

右侧

，或

底部

设置为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>


基于CSS的布局
#直肠{
宽度：300px；
高度：300px；
位置：相对位置；
边框：1px纯黑；
}
#左上角{
位置：绝对位置；
排名：0；
左：0；
边框：1px纯黑；
}
#左下角{
位置：绝对位置；
底部：0；
左：0；
边框：1px纯黑；
}
#右上角{
位置：绝对位置；
排名：0；
右：0；
边框：1px纯黑；
}
#右下角{
位置：绝对位置；
底部：0；
右：0；
边框：1px纯黑；
}
基于CSS的布局

左上角
左下角
右上角
右下角

您需要使用绝对定位来实现这一点。每个内部div的绝对位置将有两个

顶部

，

左侧

，

右侧

，或

底部

设置为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>


基于CSS的布局
#直肠{
宽度：300px；
高度：300px；
位置：相对位置；
边框：1px纯黑；
}
#左上角{
位置：绝对位置；
排名：0；
左：0；
边框：1px纯黑；
}
#左下角{
位置：绝对位置；
底部：0；
左：0；
边框：1px纯黑；
}
#右上角{
位置：绝对位置；
排名：0；
右：0；
边框：1px纯黑；
}
#右下角{
位置：绝对位置；
底部：0；
右：0；
边框：1px纯黑；
}
基于CSS的布局

左上角
左下角
右上角
右下角

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


左上角
右上角
左下角
右下角

桌子{
边界塌陷：塌陷；
边框：1px纯蓝色；
}
运输署{
宽度：100px；
高度：100px；
}
l{
右边框：100px实心黄色；
}
t{
边框底部：100px实心黄色；
}

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


左上角
右上角
左下角
右下角

桌子{
边界塌陷：塌陷；
边框：1px纯蓝色；
}
运输署{
宽度：100px；
高度：100px；
}
l{
右边框：100px实心黄色；
}
t{
边框底部：100px实心黄色；
}

外矩形和内矩形的宽度是多少？还是它们是正方形？@biziclop：假设它们是正方形。目的是，我有一个更大的div（其中很多）。现在我需要将它们分开，并根据图表加载一些数据。外部矩形和内部矩形的宽度是多少？还是它们是正方形？@biziclop：假设它们是正方形。目的是，我有一个更大的div（其中很多）。现在，我需要根据图表对它们进行划分，并在它们上加载一些数据。谢谢。我没有把这个职位包括在内，在那里我做错了。谢谢你指出。我会避免使用绝对定位，因为一些浏览器对盒子模型的解释是不正确的。这会在内容的位置上造成不一致，因为绝对零不在所有内容的同一位置。（例如，有时这是由浏览器错误地确定父元素引起的，因此0,0不在左上角，但可能在其他地方）@PaulCalabro您指的是IE还是其他

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