0

好吧，长话短说，我的一个客户让我做了一个项目，他特别想要的设计要求 100% 宽度的标题包装器，包含徽标的内部 div 是 1300px 宽度。

问题是，例如，在我的 23 in 屏幕上，它很好，显示了它应该如何，但在较小的屏幕上，有一个巨大的差距，并且包装 div 的内部 div 都未对齐。

例如，假设我们有两个 div，内部 div 是红色，外部 div 是深蓝色，背景是绿色，在大屏幕上，我得到了这个（这就是我想要的）

    -------------------------------------------------------------------
   |      -----------------------------------|                         |
   |      |                                  |          end Of window->|         
   |      |red centered in the middle(1300px wide)   green **not** seen|
   |      -----------------------------------                          |
   |        wrapper header div @ 100% (DARKBLUE)                       |
   | ------------------------------------------------------------------

现在，在上面的示例中，在标题上，您看不到绿色，因为标题包装器 div 是 100%

现在在较小的屏幕上，例如 my13'mac/iphone/sammy 平板电脑

我明白了

------------------------------------------------------------------------------|
-----------------------------------|      |                                   |
|                                  |      |     endOf parent header div       |  
|      red                         |      |  <--pushed all the way left       |
-----------------------------------       |                                   |
  wrapper header div @ 100% (DARKBLUE)    |            GREEN                  |                                   
------------------------------------------------------------------------------|

所以我试图说明的是，在较小的屏幕上，中心 div 一直向左推，并显示绿色....

关于为什么的任何想法？再次在所有大屏幕上它都很好，在较小的屏幕上，它打破了......

我应用于这些的CSS非常简单。

红色 div 是：

#topRow{
    width:100%;
    height:120px;

    background-image:url(../../images/menuStripBg.png);
    background-repeat:repeat-x; 

}

内部 div (DARKBLUE) 是：

#topRowInner{
    min-width:1300px;
    margin:0px auto;    
}

现在我假设问题在于，在较小的屏幕上，因为内部（深蓝色）div 的宽度是 1300px ；较小的屏幕分辨率小于 1300，屏幕处于 100% 时会将其扔掉，本质上，如果父包装器 100% 小于 1300，它不能将 1300 居中.....

不知道这是否有意义....

无论如何，如果这是问题所在，知道如何解决这个问题吗？

如果它不是问题，那么任何提示/提示等我都很高兴。

提前致谢。

4

1 回答 1

1

假设您的 ascii 示例并忽略对问题的进一步描述，我认为您正在寻找类似这种解决方案的东西（扩大和缩小窗口）。

您还可以将div中的position,left​​ 和margin-left样式替换为您自己的 css 中的样式，但是当窗口小于 1300 像素时，它不会居中。topRowInnermargin: 0 auto;

于 2012-04-09T01:31:59.173 回答