CSS |水平延伸包装，固定到浏览器分辨率

^^^^看看我的意思^^^

好吧，这有点难以解释

基本上，我想要的是有一个固定的布局水平（而不是垂直），这样页面就可以展开并扩展包装，以填充并重新调整大小，以适合个人浏览器。我想设置的唯一尺寸是包装纸相距很远的间隔。如果要单击浏览器的边缘并更改大小，我希望使用浏览器重新调整页面大小

我认为这样做的方法是，例如，让我们假设我的布局由左侧的内容和右侧的导航菜单组成

我只需要将我的内容宽度设为70%，菜单宽度设为30%，对吗？但这不起作用，因为我的利润空间占用了分离的空间。那么我该如何制作这个布局结构呢？这几乎是每个网站都在使用的东西，我只是不知道它是怎么做到的

CSS:

#wrapper {
position: relative;
float: left;
/* width: 70%; <--- THIS DOES NOT WORK WITH MARGINS /*
background: #ccc;
padding: 30px;
margin: 0 0 30px 20px;
border-radius: 4px 4px 4px 4px;
text-align: center;
}

#wrapper_right {
position: relative;
float: right;
/* width: 30%; <--- THIS DOES NOT WORK WITH MARGINS /*
background: #ccc;
padding: 30px;
margin: 0 20px 30px 0;
border-radius: 4px 4px 4px 4px;
text-align: center;
}

.fade {
opacity: 0.7;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}

.fade:hover {
opacity: 1;
}

    <!-- #mainwrap -->
    <div id="wrapper" class="fade">

        BLAH BLAH BLAH BLAH BLAH BLAH <br />
        BLAH BLAH BLAH BLAH BLAH BLAH <br />

    </div>
    <!-- /#mainpagewrap -->


    <!-- #wrapper_right -->
    <div id="wrapper_right" class="fade">
    BLAH<BR />
    BLAH<BR />
    BLAH<BR />
    BLAH<BR />
    BLAH<BR />
    BLAH<BR />
    BLAH<BR />
    BLAH<BR />
    </div>
    <!-- /#wrapper_right -->

#包装器{
位置：相对位置；
浮动：左；
/*宽度：70%；
我实现了你想做的，但我必须改变一些事情：

添加了一个父级
div
来包装这两个div
删除了页边距并向父级添加了填充
inline阻塞了
div并将右侧
div
从左侧移开

@ashley再次感谢，这比使用这样的东西要好得多：

#wrapper {
position: relative;
float: left;
width: 55%;
background: #fff;
padding: 3%;
margin: 0 0 5% 2%;
border-radius: 4px 4px 4px 4px;
text-align: center;
}

#wrapper_right {
position: relative;
float: right;
width: 28%;
background: #fff;
padding: 3%;
margin: 0 2% 5% 0;
border-radius: 4px 4px 4px 4px;
text-align: center;
}

一个问题将会出现，因为您使用的是%宽度，但对边距和填充使用的是确定的像素测量。您应该与CSS保持一致，因为这将定义跨浏览器布局的一致性。哇，我知道有一个更简单的方法，谢谢。总有一个更优化的解决方案。