1

コンテナ div に 4 つの子 div があり、コンテナ div の隅から拡張されるレイアウトを作成したいと考えています。各 div は 1 つのコーナーから展開されます。これは私の他の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 に答える