-3

FBに似たレイアウトを定義するためにcss+htmlを使用する方法についての良いチュートリアルを知っている人はいますか？

100％のヘッダーを作成し、次に中央の列を幅約700ピクセルで、両側に1つの列を作成する方法の良い例を探しています。

更新しました：

私はdivでCSSレイアウトを理解しようとはしていません。それを行うための1つの方法または一般的な方法があるかどうかを確認しようとしています

私は（FBを例として使用して）知りたいと思っています..どのようにしてそれらの水平方向の背景を持ち、コンテンツを3列に並べるか、中央に並べることができますか。

4

2 に答える 2

2

まず、ページの幅となるラッパークラスを定義します。余白をauto（少なくとも左右で）設定して、ページの中央に配置します。あなたは700pxと言ったので：

.wrapper
{
    width: 700px;
    margin: auto;
}

ここで、中央に1つ、両側に1つ、合計3つの列が必要です。左側と右側が同じサイズではないと仮定して（わかりやすくするために）、次のようにします。

#left
{
    width: 100px;
    float: left;
}

#middle
{
    width: 400px;
    float: left;
}

#right
{
    width: 200px;
    float: left;
}

次に、100％幅のヘッダーを追加します。

#header
{
    width: 100%;
}

そして、あなたはそのようにあなたのページをセットアップすることができます：

<div id="header">
    <div class="wrapper">
         Your header here
    </div>
</div>
<div class="wrapper">
    <div id="left"></div>
    <div id="middle"></div>
    <div id="right"></div>
</div>

各divに任意の背景色を使用したこの例を次に示します。これにより、それらがどこにあるかを確認できます。

http://jsfiddle.net/grwjy/

これは単純な例ですが、うまくいけば正しい軌道に乗ることができます。

于 2012-04-17T18:50:56.393 に答える
1

HTMLは次のとおりです。

<html>
<head>
<link rel="styleSheet" href="style.css" type="text/css">
</head>
<body>
    <div id="header">Hello</div>
    <div id="sidebar">Sidebar</div>
    <div id="content">Content</div>
    <div id="sidebar-right">Right</div>
</body>
</html>

そしてこれはcssです：

body, html{
    width:      100%;
    height:     100%;
    margin:     0;
    padding:    0;
}

#header{
    width:      100%;
padding-left:   200px;
    height:     50px;
    background: #0000FF;
}

#sidebar{
    float:      left;
    width:      200px;
    height:     100%;
    background: #FF0000;
}

#content{
    float:      left;
    width:      700px;
    height:     100%;
    background: #00FF00;
}

#sidebar-right{
    margin-left:900px;
    height:     100%;
    background: #FFFF00;
}
于 2012-04-17T18:53:20.703 に答える