11

HTML テーブルから純粋な CSS レイアウトへの移行を検討しています。これまでのところ、ページを適切にレイアウトする方法がわかりません。

できます：

  • ヘッダ
  • 左のナビゲーション
  • コンテンツ
  • フッター

このように：

________________________ 
|      Header           |
|_______________________|
| Left |     Content    |
| Nav  |                |
|      |                |
|      |                |
|      |                |
|      |                |
|      |                |
|      |                |
|      |                |
|      |                |
|      |                |
|______|________________|
|     Footer            |
|_______________________|

ただし、一部のページでは、「コンテンツ」領域を次のように分割できるようにしたいと考えています。

________________________ 
|      Header           |
|_______________________|
| Left | info | info    |
| Nav  |      |         |
|      |      |         |
|      |      |         |
|      |      |         |
|      |______|_________|
|      | Other info     |
|      |                |
|      |                |
|      |                |
|      |                |
|______|________________|
|     Footer            |
|_______________________|

このようなことがどのように行われるか知っている人はいますか？または、この種のことを支援する素敵なウェブサイトでさえありますか?

4

5 に答える 5

33

最初のレイアウトプレビュー（オンラインデモ）：

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

html： 
<div id="header">Header</div>
<div id="main-wrap">
    <div id="sidebar">Left Nav</div>
    <div id="content-wrap">Content</div>
</div>
<div id="footer">Footer</div>
css： 
/* sizes */
#main-wrap > div { min-height: 450px; }


#header,
#footer {
    min-height: 40px;
}

/* layout */
#main-wrap {
    /* overflow to handle inner floating block */
    overflow: hidden;
}

#sidebar {
    float: left;
    width: 30%;
}

#content-wrap {
    float: right;
    width: 70%;
}

2番目のレイアウトプレビュー（オンラインデモ）：

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

htmlは最初のレイアウトと非常に似ていますが、次のラッパーが1つ含まれています#content-wrap。 
<div id="header">Header</div>
<div id="main-wrap">
    <div id="sidebar">Left Nav</div>
    <div id="content-wrap">
        <div id="info-wrap">
            <div class="info">small info </div>
            <div class="info">small info</div>
        </div>
        Content
    </div>
</div>
<div id="footer">Footer</div>
cssも同様ですが、css新しいdivをターゲットにするためにいくつかのルール を追加しました。
/* sizes */
#main-wrap > div { min-height: 450px; }

#header,
#footer {
    min-height: 40px;
}

.info { min-height: 80px; }

/* layout */
#main-wrap {
    /* overflow to handle inner floating block */
    overflow: hidden;
}

#sidebar {
    float: left;
    width: 30%;
}

#content-wrap {
    float: right;
    width: 70%;
}

#info-wrap {
    /* overflow to handle inner floating block */
    overflow: hidden;
}

.info {
    width: 50%;
    float: left;
}

更新：改善されたスタイル

于 2012-05-15T11:38:30.323 に答える
2

コンテンツ div では、幅を設定してから、情報セクション用に 3 つの div を作成します。

上の 2 つは幅を指定し、コンテナー コンテンツの合計を超えないようにします。一方を左に、もう一方を右に浮かせます。

div の下に以下を追加します。

<div class="clear"></div>

そのためのcssは次のとおりです。

.clear {clear:both;}

クリアの下には、必要なレイアウトを提供する 3 番目の div があります。

于 2012-05-15T08:09:18.980 に答える
2

http://grids.heroku.com/fluid_grid?column_amount=3

これらのグリッドを追加および削除できます。

于 2012-05-15T04:43:26.370 に答える
2

Give one of the CSS grid systems a go. This site lists some:10 Really Outstanding and Useful CSS Grid Systems

于 2012-05-15T04:41:23.763 に答える
-2

コンテンツ列に別の内部テーブルを追加します。このテーブルをサーバー（runat = "server）として作成します。コードビハインドファイルで条件を指定し、テーブルをfalseまたはtrueとして表示します。この例にはネストされたテーブルが含まれています。コードビハインドで特定の条件が発生した場合は非表示にします。特定のイベントに関するファイル。

例えば：

<body>
    <form id="form1" runat="server">
    <div>

        <table >
            <tr>
                <td colspan="2">
                    header</td>
            </tr>
            <tr>
                <td style="height:50px;">
                    left nav
                </td>
                <td>
                    content

                    <table class="style1" id="innertab" runat="server">
                        <tr>
                            <td>
                                info</td>
                            <td>
                                info</td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                other info</td>
                        </tr>
                    </table>

                </td>
            </tr>
            <tr>
                <td colspan="2">
                    footer</td>
            </tr>
        </table>

    </div>
    </form>
</body>

ファイルの背後にあるコード：

protected void Page_Load(object sender, EventArgs e)
        {
            if (Session["value"].ToString == ValueType)
            {
                innertab.Visible = false;
            }
        }
于 2012-05-15T05:14:56.713 に答える