0

私は css サイトを作成していますが、次のように表示したいと考えています: 3 つの垂直 div。左中央右。中央のdiv にはサイト コンテンツがあり、中央とブラウザの境界線の間のスペースを左右のdiv で埋める必要があります。

これが私のコードです。

    #container
{
 width:100%;
 background-color:#000;
}
.center
{
 width:1000px;
 height:400px;
 background-color:#F90;
 margin: 0px auto;
 overflow: auto;
}
.spacer-left
{ 
 width:100%;
 height:400px;
 background-color:#F90;
 float:left;
}
.spacer-right
{ width:100%;
 height:400px;
 background-color:#F90;
}

HTML は次のとおりです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">
<div class="spacer-left"></div>
<div class="center" style="background-color:#F30;"></div>
<div class="spacer-right"></div>
<div style="clear:both"></div>
</div>
</body>
</html>

2 div で試してみましたが、問題はありませんでした。左は float:left とピクセル単位の幅、右は float なしの 100% 幅です。出来た。しかし、3 divでそれを作る方法。前もって感謝します！

4

2 に答える 2

1

セバスチャンの助けに感謝しますが、私は別の方法を考え出しました. これが現在のコードの外観であり、機能します。

#container
{
    width:1000px;
    background-color:#000;
    margin:0 auto;
}
.center
{
    width:100%;
    height:400px;
    background-color:#F90;
    margin: 0px auto;
    overflow: auto;
}
.spacer
{   
    width:50%;
    height:400px;
    background-color:#F90;
    float:left;
}
.head_warp
{
    width:100%;
    display:block;
    height:400px;
    margin:0 auto;
    padding:0;
    position:absolute;
    top: 0;
    left: 0;
    text-align:center;
    z-index:-9999;
}

そしてHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="head_warp">
<div class="spacer"></div>
<div class="spacer" style="background-color:#F06"></div>
</div>
<div id="container">
<div class="center" style="background-color:#F30;"></div>
</div>
</body>
</html>

もう一度助けてくれてありがとう。私の解決策に問題がある場合は、ここに再度書き込みます。

于 2010-11-19T14:46:17.940 に答える
0

更新: 3 つの div と z-index を使用した、以下の回答の別の代替方法。

http://jsfiddle.net/SebastianPataneMasuelli/mzvB4/1/

中央の div にコンテンツを配置してサイトを作成しようとしている場合は、次の方法でそのレイアウトを簡単に複製できます。

<body>
  <div class="center">center</div>
</body>

CSSで：

html {height: 100%;   }
.center { width:750px; margin: 30px auto; height: 100%; }

ここで遊んでください：http://jsfiddle.net/SebastianPataneMasuelli/mzvB4/

クラス名から、これらのdivは空のスペーサーであり、必要ではないと想定しています.spacer_left。.spacer_right

これはベース CSS レイアウトの良いリソースです: http://www.csseasy.com/

于 2010-11-19T11:18:00.177 に答える