1

我想制作一个布局，其中容器 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;}
4

2 回答 2

2

演示：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;
}
于 2012-12-07T13:57:57.900 回答
1

演示：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;
}​
于 2012-12-07T13:53:37.197 回答