0

我的网站有布局问题..

我使用 MVC 开发它..

当我将其最小化或使用较小的分辨率时，布局会变得有点奇怪..

我的电脑使用 1366 x 768 分辨率..

如果我不最小化它，它会没事的..

但是当我试图让浏览器变小时，它在右边有一个间隙..

我想像 www.bluenile.com 网站一样将其居中。

谢谢你..

图片：

在我最小化之前：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 代码使它运行：位置：相对.. 我删除了该代码，现在布局已经好了..

谢谢大家帮助.. ：）

4

3 回答 3

1

使元素居中的技巧是给它一个宽度和左右边距auto。例如margin: 0 auto。如需更多帮助，请发布您的代码示例。

于 2013-05-28T01:52:37.663 回答
0

在您的 CSS 中，只需在您的页面、容器、包装器等上添加这一行。

{
  margin:0 auto; 
}

这是一个参考，如何使用 CSS 使网站居中。如果你想测试它到不同的屏幕分辨率，你可以在这里测试。希望这对您有所帮助。:)

于 2013-05-28T02:01:39.203 回答
0

添加margin: 0 auto到正文并给它一个width: 80%或什么。为了使您的页面流畅，请使用 width in%而不是 px

演示

于 2013-05-28T03:28:57.723 回答