Question

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

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

在我的页面上，我想要一个包含一个方框的左栏，右边的那个是不同的方框。整个事情应该在页面中居中，但是当在框上使用margin:auto;时，我无法添加边距，因此它们不会相互挤压。我也找不到左边方框的方法，避免在其下方显示其他方框。我已经制作了一些关于页面应该是什么样子的模型： 注意：标题不再需要1024px宽

Full page

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

Narrow page

您可以看到元素仍然应该在页面上居中，并且绿色块应该再次位于具有整页高度的其他块的左侧。

额外：如果这比我预测的要少（我已经乱了几天），滚动时绿色框应该保留在页面上，如下图所示： Scrolled full page < / p>

以下是当前代码： jsfiddle

我知道这是很多图片和一面文字，但我不知道如何开始这个......

Answer 1

好的，我想我已经得到了你想要的大部分内容。这对你来说够了吗？

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' );
    }
});

Answer 2

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

Answer 3

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

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

我添加了位置：固定以锁定左侧框，同时滚动并向左浮动。我还将宽度调整为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%;
}

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

CSS响应式布局

3 个答案: