1

我不知道我的问题的最佳标题是什么...

好吧，我将用一张简单的图片展示我想要做什么：

在此处输入图像描述

问题：

  • 我的内容居中，可以说它是 980px 宽度。
  • 现在，我的标题将有一个徽标和一个菜单。
  • 但是，我希望我的标题只使用顶部的左侧，例如内容宽度的 50%，然后拉伸到视口的左侧。我知道这可以使用 javascript 并计算内容的左偏移量并使用它的左偏移量设置动态宽度 div。

这是最好的方法吗？我相信应该有另一种方式，但我想不出一个。希望你们有比我更好的主意，因为当我调整窗口大小时，我会减慢网站的性能。

4

3 回答 3

2

也许有 2div秒；一个在背景中，一个包含徽标？

http://jsfiddle.net/kUKyp/1/

于 2013-04-05T15:55:06.073 回答
0

我相信你所追求的是 CSS 中的 margin:auto 。这很简单：

  1. 将您的内容 div 放在页面上，按照您的需要固定宽度为 980px 并设置 margin:auto。
  2. 将您的徽标和菜单 div 放入内容中。

这是一个很好的例子：

http://bluerobot.com/web/css/center1.html

上一页的 CSS 代码：

body {
    margin:50px 0px; padding:0px; /* Need to set body margin and padding to get consistency between browsers. */
    text-align:center; /* Hack for IE5/Win */
    }

#Content {
    width:500px;
    margin:0px auto; /* Right and left margin widths set to "auto" */
    text-align:left; /* Counteract to IE5/Win Hack */
    padding:15px;
    border:1px dashed #333;
    background-color:#eee;
    }

和标记：

<body>
    <div id="Content"></div>
</body>
于 2013-04-05T15:46:10.490 回答
0

使用 twitter 引导流式布局

    <div class="row-fluid">
         <div class="span12">
             <div class="row-fluid">
                  <div class="span6">   (6 for half of the width, number can be changed 1-12)                        your logo and menu
                  </div>
            your content
             </div>
         </div>
于 2013-04-05T16:10:45.023 回答