css - 滑块/图像超出文档流

Question

我试图将侧边栏浮动到左侧，将滑块浮动到右侧，但是，我的图像不在文档流中。

基本上我要做的是当用户调整浏览器窗口的大小时，图像会缩小（这就是我使用 max-width: 100% 的原因）。

在 Chrome 中查看以查看问题

Answer 1

您可以尝试将width : 100%其用于您的主要课程，如下所示。

.main {
position: relative;
float: right;
max-width: 600px;
margin: 0;
width: 100%;
}

编辑：

您已经编辑了您的标记设计。您在文章 div 之外添加了一个新的内容 div。

编辑

#page-wrap {
max-width: 960px;
min-height: 100%;
height: auto !important;
padding-bottom: 40px;
margin: 0 auto;
position: relative;
}

#sidebar {
position: absolute;
width: 300px;
left: 0;
top: 130px;
}

.content {
max-width: 600px;
position: absolute;
left: 360px;
top: 130px;
right: 0;
}

如果您以这种方式更改类，则在调整浏览器大小时，将调整图像大小。

您可以查看有关此问题的简单演示。

http://jsfiddle.net/qCQ9H/2/