0

サイトのレイアウトに問題があります..

私はそれにMVCを使用して開発しています..

レイアウトを最小化するか、解像度を小さくすると、レイアウトが少し奇妙になります..

1366 x 768 の解像度を使用している私の PC ..

私がそれを最小化しなければ、大丈夫です..

しかし、ブラウザを小さくしようとすると、右側に隙間ができてしまいます..

www.bluenile.com Webサイトのように中央に配置したい..

ありがとうございました..

画像:

最小化する前に: http://i.imgur.com/aQyoAYH.png

最小化した後: http://i.imgur.com/9cWtl13.png

君たちありがとう！

これは私のレイアウトです:

<body class="body">
<table class="wrapper" style="width: 100%;">
    <tr>
        <td>
            @Html.Partial("Header")
            <table class="main" width="1000" border="0" cellspacing="0" cellpadding="0" style="border: 0px;"
                align="center">
                <tr>
                    <td colspan="3">@Html.Partial("TopMenu")
                    </td>
                </tr>
                <tr>
                    <td colspan="3" width="100%">@RenderBody()
                    </td>
                </tr>
                <tr>
                    <td class="sidepadding">
                    </td>
                    <td>@Html.Partial("ResourcesCentre")
                    </td>
                    <td class="sidepadding">
                    </td>
                </tr>
                <tr>
                    <td class="sidepadding">
                    </td>
                    <td>@Html.Partial("Networks")
                    </td>
                    <td class="sidepadding">
                    </td>
                </tr>
            </table>
            <table width="1015" border="0" cellspacing="0" cellpadding="0" style="border: 0px;"
                align="center">
                <tr>
                    <td style="width: 5px; height: 1px;">
                    </td>
                    <td>@Html.Partial("Footer")
                    </td>
                    <td style="width: 5px; height: 1px;">
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

これが私のスタイルです：

    .body
    {
background-image: url('/Content/images/Diamond_Background_Blue.png');
    font-size: 0.75em;
    font-family: "Gotham Book", "Gotham Bold", "Gotham Light", "Gotham Thin", Verdana, Tahoma, Arial, Helvetica, Sans-Serif;
    margin: 0;
    padding: 0;
    color: #696969;
}

    .wrapper
    {
margin: 0 auto 0 auto;
}

アップデート：

私のcssをチェックした後、それを実行させるナビゲーションにcssコードがあります: position: relative ..そのコードを削除すると、レイアウトはもう大丈夫です..

助けてくれてありがとう.. :)

4

3 に答える 3

1

要素を中央に配置するコツは、要素の幅と左右のマージンを にすることautoです。例margin: 0 auto。さらにヘルプが必要な場合は、コードの例を投稿してください。

于 2013-05-28T01:52:37.663 に答える
0

margin: 0 autoボディに追加して、width: 80%または何かを与えます。%ページを滑らかにするには、px ではなくwidth in を使用します

デモ

于 2013-05-28T03:28:57.723 に答える