0

http://jsfiddle.net/aLmUy/1/

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

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

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

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

我只是将我的内容设置为 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%，边距，并且还根据浏览器分辨率重新调整大小？

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

4

2 回答 2

0

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

  1. 添加了一个父div级来包装 2 个 div。
  2. 删除边距并向父级添加填充。
  3. inline-blockeddivs 并将右侧div从左侧移开

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

于 2013-03-13T16:02:29.423 回答
0

@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;
}
于 2013-03-13T16:12:14.910 回答