1

我正在处理需要调整到浏览器宽度的页面。当浏览器窗口被拉伸时，“内容”需要增长（让那部分工作！）当窗口缩小超过最小宽度时，页面结构需要保持不变。所以我应该能够滚动查看“侧边栏”，但它会跳下来。请帮忙！

这是我迄今为止尝试过的 -

<div id="wrapper" style="width:90%;
    margin:0 auto;
    height:400px;
    background: #fff;
    padding:20px;
    border: 1px solid blue;">

    <div id="content" style="width:54%;
    float:left;
    min-width:400px;
    height:400px;
    margin-right:3%;
    border:1px solid green;">
    </div>

    <div id="sidebar" style="width:350px;
    float:left;
    margin-right:3%;
    height:400px;
    border:1px solid yellow;">
    </div>

</div>

谢谢。

4

5 回答 5

1

min-width: 850px;在包装纸上设置 a 。或者任何你想要的最低限度。把你的侧边栏放在第一位并让它向右浮动：

小提琴：http: //jsfiddle.net/mdares/JEVfC/

#wrapper {
    width:90%;
    margin:0 auto;
    height:400px;
    background: #fff;
    padding:20px;
    border: 1px solid blue;
    min-width: 850px;
}
#content {
    min-width:400px;
    width: 54%;
    height:400px;
    margin-right:3%;
    border:1px solid green;
}
#sidebar {
    width:350px;
    float:right;
    margin-right:3%;
    height:400px;
    border:1px solid yellow;
}

另外 - 如果您不希望它们之间的差距扩大，请设置一个margin-left: 3%;on #sidebar。上#content，删除width: 54%;并添加overflow: hidden;

于 2013-09-27T15:35:01.753 回答
1

您熟悉@media查询或响应式网页设计吗？是用CSS3 制作的。这可能会帮助您根据浏览器屏幕的大小来设计您的网站。

这个怎么运作

您需要设置最大和最小with属性，依赖（或不）屏幕的大小（使用@media查询）。检查这个

解决您的问题 HTML

<div id="wrapper">
    <div id="content"></div>
    <div id="sidebar"></div>
</div>

CSS

#wrapper {
    max-width: 90%;
    width:100%;
    margin:0 auto;
    height:400px;
    background: #fff;
    padding:20px;
    border: 1px solid blue;
}
#content {
    max-width: 54%;
    width:100%;
    float:left;
    height:400px;
    margin-right:3%;
    border:1px solid green;
}
#sidebar {
    with: 100%;
    max-width:350px;
    float:left;
    margin-right:3%;
    height:400px;
    border:1px solid yellow;
}

JSFIDDLE

于 2013-09-27T15:44:30.003 回答
0

你可以定义一个最小宽度：

#wrapper {
 min-width: 600px;
}
于 2013-09-27T15:34:30.870 回答
0

在您的 div 类中，将最小宽度参数添加到样式中，使其不会缩小到该值以下！你可以这样做：

<div id="wrapper" style="width:90%;
    margin:0 auto;
    height:400px;
    background: #fff;
    padding:20px;
    min-width:500px; /* Enter whatever minimum width you want your page to be */
    border: 1px solid blue;">

    <div id="content" style="width:54%;
    float:left;
    min-width:400px;
    height:400px;
    margin-right:3%;
    border:1px solid green;">
    </div>

    <div id="sidebar" style="width:350px;
    float:left;
    margin-right:3%;
    height:400px;
    border:1px solid yellow;">
    </div>

</div>
于 2013-09-27T15:43:59.497 回答
0

这是你要找的吗？检查这个

<div id="wrapper" style="width: 90%;
    margin: 0 auto;
    height:400px;
    background: #fff;
    padding: 20px;
    border: 1px solid blue;">

    <div id="content" style="width: 54%;
    float: left;
    height:400px;
    margin-right: 3%;
    border: 1px solid green;"> Content </div>

    <div id="sidebar-left" style="  width: 31%;
    float: left;
    margin-right: 3%;
    height:400px;
    border: 1px solid yellow;"> Sidebar </div>
</div>
于 2013-09-28T05:19:28.143 回答