拥有不同宽度的页面的最佳方式

Question

我必须创建一个具有以下结构的页面：

RED部分宽度= 100％，蓝色（和绿色）部分宽度为885px。

我想创建不同的宽度，一些宽度= 885px，另一些宽度为980px ......但我认为这不是正确的方法...事实上如果我必须更改宽度，例如从885px到980 px

我认为可能需要另一个解决方案......第一个解决方案的宽度为100％;第二个，在第一个内部，宽度为885px。但我认为将绿色div放在背面红色的同一高度/顶部可能很困难。

您将采用哪种方法来达到目标​​？

谢谢

Answer 1

您需要管理如下的简单html：

<div class="wrapper">
  <div class="wrap"></div>
</div>

.wrapper{
  width: 100%;
}
.wrap{
  width: 885px;
  margin: 0 auto;
}

当您只需要全宽div时，请不要在html中包含.wrap。当你只需要885px宽度div时，在你的html中排除.wrapper。

Answer 2

我快速举例说明了如何做到这一点right here。我刚刚创建了两个类，一个宽度为100%（红色div），另一个宽度固定（蓝色div，我使用了450px例）。绿色div只是红色div内的蓝色div。我希望我的例子回答你所有的问题。祝你好运！

Answer 3

我猜你可以在一个主容器中管理带有绿色带和秒带红色带的红色，它还包含带宽度的蓝色容器。为了更好地解释它，我已经创建了一个JsFiddle，请点击链接查看它的工作原理：

Working example

我使用@ C-link尼泊尔建议的方法，但我认为这样做是不够的。

HTML：

<div class="top"></div>
<div class="main">
    <div class="redgreen">
        <div class="green"></div>
    </div>
    <div class="red"></div>
    <div class="blue"></div>
</div>
<div class="foot">  
</div>

CSS：

.top {
    background-color: red;
    height: 50px;
}

.main {
    text-align: center;
    position: relative;
}

.green, .blue {
    width: 600px;
    margin: 0 auto;    
}

.redgreen {
    width: 100%;
    background-color: red;
    position: absolute;
    top: 30px;
}

.red {
    height: 30px;
    position: absolute;
    top: 150px;
    background-color: red;
    width: 100%;
}

.green {
    background-color: green;
    height: 100px;
}

请注意，大多数CSS类都有绘制图案的高度和背景颜色......