Question

我想做一个布局，其中容器div有4个子div，它们从容器div的角扩展。每个div从一个角落扩展。我想要实现这一点，而不是为childreen设置绝对位置，因为这与我的其他CSS混淆。这是它停止的地方： jsFiddle：http://jsfiddle.net/XcKYF/2/

<div class=container>
<div class=div1>11</div>
<div class=div2>22</div>
<div class=div3>33</div>
<div class=div4>44</div>
</div>

.container
{
width:100%;
height:100%;
background-color:red;
}
.div1
{
position:absolute;
bottom:0;
left:0;
width:20px;
height:20px;
background-color:green;
}
.div2
{
position:absolute;
bottom:0;
right:0;
width:20px;
height:20px;
background-color:yellow;
}
.div3
{
position:absolute;
top:0;
left:0;
width:20px;
height:20px;
background-color:blue;
}
.div4{
position:absolute;
top:0;
right:0;
width:20px;
height:20px;
background-color:violet;}

Answer 1

示范：http://jsfiddle.net/94U4U/1/

我认为你所寻找的是一个相对定位的容器，它占据了页面，分为4个角和一个中央内容持有者：

html, body{
  height:100%;
}
.container
{
  position:relative;
  width:100%;
  height:100%;
  background-color:red;
}

.container div.corner{
  height:20%;
  width:20%;
  position:absolute;
}

.container div.content{
  background-color:white;
  height:60%;
  width:60%;
  position:absolute;
  left:20%;
  top: 20%;
}

.div1
{
  bottom:0;
  left:0;
  background-color:green;
}

.div2
{
  bottom:0;
  right:0;
  background-color:#FF0;
}

.div3
{
  top:0;
  left:0;
  background-color:blue;
}

.div4
{
  top:0;
  right:0;
  background-color:#EE82EE;
}

Answer 2

演示：http://jsfiddle.net/XcKYF/6/

不确定这是否完全解决了你的问题，但这就是你想做的事情。

HTML：

<div class=container>
    <div class=div1>11</div>
    <div class=div2>22</div>
    <div class=div3>33</div>
    <div class=div4>44</div>
    some other content<br/>
        some other content<br/>
        some other content<br/>
        some other content<br/>
        some other content<br/>
</div>

CSS：

.container
{
    background-color:red;
    position:relative;
    padding:20px;
}
.div1
{
    position:absolute;
    bottom:0;
    left:0;
    width:20px;
    height:20px;
    background-color:green;
}

.div2
{
    position:absolute;
    bottom:0;
    right:0;
    width:20px;
    height:20px;
    background-color:yellow;
}
.div3
{
    position:absolute;
    top:0;
    left:0;
    width:20px;
    height:20px;
    background-color:blue;
}
.div4
{
    position:absolute;
    top:0;
    right:0;
    width:20px;
    height:20px;
    background-color:violet;
}

带角落的容器

2 个答案: