Question

^^^^看这里看看我的意思^^^

好的，这有点难以解释......

基本上我想要的是有一个固定的布局水平（不是垂直的），所以页面被拉伸并扩展包装器以填充和重新调整人物浏览器的大小。我想要设置的唯一尺寸是包装纸相隔很远的分隔。如果您单击浏览器的边缘并更改大小，我希望页面可以使用浏览器重新调整大小。

我认为这样做的方法是举例来说我的布局包含左侧的内容和右侧的导航菜单....

我只是让我的内容达到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;
}

的 HTML：

    <!-- #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 -->

有人可以制作一个简单的布局，左边是包装，中间是内容，右边是另一个，尺寸为25％，50％，25％垂直边距，并且根据浏览器分辨率重新调整尺寸？

所以我可以看到它是如何完成的。还要提前感谢任何有帮助的人（：

Answer 1

我实现了你想做的事，但我不得不改变一些事情：

添加了一个父div来包装2个div。
删除了边距并向父级添加了填充。
inline-blocked divs并向左移动div

http://jsfiddle.net/aLmUy/2/

Answer 2

@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 |延伸水平固定到浏览器分辨率的包装器

2 个答案: