0

デモjsFiddlediv カラー紺碧があります。中央の列の幅の領域をメートルではなく塗りつぶしたいのですが、サイズはどのくらいになりますか。css3 / cssにjQueryがないソリューションはありますか?

私はこの写真のようにそれが必要です: ここに画像の説明を入力してください

このような現在のststus:

多くのThx。

ここに画像の説明を入力してください デモjsFiddle

コードhtml:

<div id="frame">
  <div id="inside_window">
    <div id="Yellow"></div>
    <div id="Green"></div>
        <div id="Blue"></div>
    <div id="Red"></div>
    <div id="ver"></div>
    <div id="hor"></div>
    <div id="ver2"></div>
  </div>
 </div>

コードcss:

  html, body{
  height:100%;
   background-color: azure;
            } 
    #frame
{
position: relative;
background-color: black;
height: 100%;
width: 100%;
margin: auto;
padding:0;
border: 1px solid black;
}

#Yellow
{
position: absolute;
height: 100%;
width: 150px;
-webkit-border-radius: 0px;    
margin: 0 ;

    background-color: Yellow;
    z-index:10;
    display:table;

left:0px;
top:0; 
}

#Green
{
position: absolute;
height: 100%;
width: 150px;
-webkit-border-radius: 0px;    
margin: 0 ;

    background-color: green;
    z-index:10;



right:0px;
top:0; 
}

#Blue
{
position: relative;
height:100%;
min-width:65.8%;
-webkit-border-radius: 0px;    
margin: 0 auto;

    background-color: #62A9FF;
    z-index:10;
    display:table;
    font-size:220%;


left:0px;
top:0px; 
}

#Red
{
position: absolute;
height: 150px;
width: 100%;
-webkit-border-radius: 0px;    
margin: 0 ;

    background-color: red;
    z-index:10;
    border: 1px solid black;

left:0px;
bottom:0px; 
}

#inside_window
{

width:100%;
height:100%;
margin:0 auto;    
position: relative;
border: 1px solid black;

background-color: brown;
-webkit-transform: rotate(0deg); 
-webkit-transform-origin:50% 50%; 
}
#ver
{
position: absolute;
    height: 100%;
    width: 5px;
    margin: 0;
    background-color: white;
    left:150px;
    top:0px;   
    z-index:1;
}
#hor
{
position: absolute;
    height: 5px;
    width: 100%;
    margin: 0;
    background-color: white;
    left:0px;
    bottom:150px;
        z-index:20;
}
#ver2
{
position: absolute;
    height: 100%;
    width: 5px;
    margin: 0;
    background-color: white;
    right:150px;
    top:0px;   
    z-index:1;
}
​
4

2 に答える 2

1

青のコードから次の CSS を削除してみてください。

position: relative;
display:table;
于 2012-07-05T17:26:58.960 に答える
1

このようなレイアウトを実現する方法はたくさんあります。コンテンツの順序を変更できると仮定すると、いつでも「聖杯」レイアウト方法を試すことができます。

于 2012-07-05T17:27:23.450 に答える