0

我在设计响应式网站时遇到了麻烦。到目前为止，我一直使用 1024 像素的固定宽度。通过这样做，我避免了烦人的响应式设计。但是是时候改变了！

首先，我希望我的页面最大宽度为 1024px，但是当页面变窄时，内容也需要变窄。我目前遇到的问题是使用max-width混乱，margin:auto;因为页面需要居中。

在我的页面上，我想要一个包含一个框的左列，而它的右侧将是不同的框。整个东西应该在页面中居中，但是在margin:auto;盒子上使用时，我不能添加边距，所以它们不会相互挤压。我也找不到一种方法来获取左侧的左侧框并避免在其下方显示其他框。我已经制作了一些页面应该是什么样子的模型： 注意：标题不再需要 1024px 宽

完整页面

在这里您可以看到视口（橙色边框）和布局。绿色块应该占据页面那一侧的整个高度，所以其他块不会在它下面。当页面变窄时，它应该如下所示：

窄页

您可以看到元素仍应位于页面中心，并且绿色块应位于具有完整页面高度的其他块的左侧。

额外：如果这比我预期的要少（我已经搞砸了好几天），绿色框应该在滚动时留在页面上，如下图所示：滚动整页

这是当前代码： jsfiddle

我知道这是很多图像和一堵文字墙，但我不知道如何开始...

4

3 回答 3

2

好吧，我想我已经得到了你想要的大部分东西。这对你来说足够了吗？

http://jsfiddle.net/wallysalami/T9k74/6/

HTML：

<body>
    <div class='topbox'></div>
    <table id='boxes-table'>
        <tbody>
            <tr>
                <td>
                    <div id='leftbox' class='static-top-position'></div>
                </td>
                <td class='boxes-column'>
                    <div class='box'></div>
                    <div class='box'></div>
                    <div class='box'></div>
                    <div class='box'></div>
                    <div class='box'></div>
                    <div class='box'></div>
                    <div class='box'></div>
                    <div class='box'></div>
                    <div class='box'></div>
                </td>
            </tr>
        </tbody>
    </table>
</body>

CSS：

body
{
    text-align: center;
}

.fixed-top-position
{
    position: fixed;
    top: 10px;
}

.static-top-position
{
    position: static;
}

.topbox
{
    background-color: blue;
    width: 998px;
    height: 50px;
    border: 1px solid grey;
    margin: 13px;
    display: inline-block;
    text-align: left;
}

.box
{
    height:300px;
    width:228px;
    border:1px solid grey;
    display: inline-block;
    background-color: orange;
    margin: 5px;
}

#leftbox
{
    height:300px;
    width:200px;
    border:1px solid red;
    background-color: green;
    margin: 10px 30px 0px 10px;
}

#boxes-table
{
    max-width: 998px;
    display: inline-block;
    margin: auto 0px;
}

#boxes-table > tbody> tr > td
{
    vertical-align: top;
    width: auto;
}

Javascript（jQuery）：

$(window).scroll( function() {
    var tableTopPosition = $( '#boxes-table' ).offset( ).top - $( window ).scrollTop( );
    var magicNumber = 5;

    var leftbox = $( '#leftbox' );
    var leftboxClass = leftbox.attr( 'class' );
    var topPosition = leftbox.top;

    if ( tableTopPosition < magicNumber && leftboxClass == 'static-top-position' )
    {
        leftbox.attr( 'class', 'fixed-top-position' );
    } else if ( tableTopPosition > magicNumber && leftboxClass == 'fixed-top-position' )
    {
        leftbox.attr( 'class', 'static-top-position' );
    }
});
于 2013-06-05T14:47:51.033 回答
1

好的，您必须将左框视为列中，以停止下面的任何包装，这是最简单的选择。至于其他盒子和它们之间的空间，只需使用 css3 box-sizing:border-box; 并添加填充。一个很好的例子是这里http://css-tricks.com/box-sizing

于 2013-06-05T12:47:05.303 回答
1

我没有太多时间花在这上面，但如果没有别的，这应该为您指明正确的方向。

http://jsfiddle.net/G5pWw/17/

我添加了 position: fixed 以在您滚动并将其向左浮动时锁定在左侧框。我还将宽度调整为 30% 和最大宽度 200px 以进行响应式设计。

#leftbox {
position: fixed;
float:left;
height:300px;
width: 30%;
max-width:200px;
border:1px solid red;
}

我添加了一个容器来容纳右侧的所有盒子。我将宽度设置为 70%，您可以根据需要设置最大宽度。我把容器浮起来了。

#box_container {
float: right;
width: 70%;
}

总而言之，即使您根据屏幕宽度滚动和移动右框，这也会使您的左框锁定在左侧。您将需要使用填充等，但这应该可以。希望这可以帮助！如果您有任何问题，我会尽量快速回复。

于 2013-06-05T14:26:23.830 回答