Question

好吧，这么长的故事简短，我的一个客户让我做了一个项目，他特别想要的设计要求100％宽度的标题包装，并且包含徽标的内部div是1300px宽。

问题在于，例如，在我的23屏幕上，它很好，显示它应该如何，但在较小的屏幕上，有一个巨大的差距，包装div的内部div都是错位的。

所以例如说我们有两个div，内部div是RED，外部div是DARK蓝色，背景是GREEN，在大屏幕上，我得到这个（这就是我想要的）

    -------------------------------------------------------------------
   |      -----------------------------------|                         |
   |      |                                  |          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非常简单。

RED 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;    
}

现在我 ASSUMING 问题是，在较小的屏幕上，因为宽度在内部（深蓝色）div是1300px;屏幕分辨率越小不到1300，100％的屏幕将其抛弃，实质上它无法居中如果父包装100％的1300小于1300 .....

不确定这是否有意义......

无论如何，如果这是问题，任何想法如何解决这个问题？

如果不是问题，那么任何提示/提示等我都很乐意欣赏。

先谢谢。

1 个答案:

答案 0 :(得分：1)

Answer 1

假设您的ascii示例并忽略了对问题的进一步描述，我认为您正在搜索类似 this solution （扩大和缩小窗口）的内容。

您也可以将position div中的left，margin-left和topRowInner样式替换为margin: 0 auto;，与您自己的css一样，但不会当窗口小于1300像素时将其居中。

百分比宽度和固定内宽问题

1 个答案: