拥有不同宽度页面的最佳方法答案

【问题标题】：Best way to have a page with different width拥有不同宽度页面的最佳方法
【发布时间】：2014-10-22 06:48:03
【问题描述】：

我必须创建一个具有这种结构的页面：

红色部分的宽度 = 100%，蓝色（和绿色）部分的宽度为 885 像素。

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

我认为另一种解决方案可能是必须 div... 第一个的宽度为 100%；第二个，在第一个里面，宽度为 885px。但我认为将绿色 div 放置在与背面红色 div 相同的高度/顶部可能很困难。

您会使用哪种方法来实现目标？

谢谢

【问题讨论】：

标签： html css position width absolute

【解决方案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。

【讨论】：

但是“wrap”内的所有 div 都继承了 width=885px ......那好吧......现在..所有 div 都应该有 width = 100%，必须在 div“wrapper”内“... 正确的？如果是这样，应该有绝对位置返回（或前面）蓝色部分..正确吗？
我可以在您的图片中清楚地看到，我的布局可以在不使用绝对定位的情况下完美运行，或者如果您有任何疑问和困惑，请尽可能使用绝对定位...

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

Working example

我使用了@C-link Nepal 建议的方法，但我认为放红条是不够的。

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 类对于要绘制的图案都有高度和背景颜色...

【讨论】：