容器與角div

Question

我想做一個佈局，其中容器div有4個子容器div從容器div的角落擴展。每個div從一個角落擴展。我想要實現這一點，而不是將位置設置爲絕對位置，因爲這與我的其他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/

不知道，完全solwes你的問題，但類似於你希望能做些什麼事如何。

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