Question

尝试创建新布局但遇到了问题。

目前，我左边有一个固定的侧边栏，然后内容浮动了。

侧栏的宽度为18％，其他内容的宽度为82％。

这很好用，但看起来很丑，在较大的屏幕尺寸下不稳定。

但我希望进行更改，并使侧边栏固定宽度。这对我要占用房间其他部分的其他内容造成了问题。

我如何才能拥有正确的内容，仍然占用房间的其余部分，同时保留固定的侧边栏？

希望这有点道理！

这是我面临的问题的小提琴：

http://jsfiddle.net/Uyv6w/

我现在所做的事情：

http://jsfiddle.net/Uyv6w/1/

布局是这样的：

<div id="container">
    <div id="sidebar"></div>
    <div id="content">
        <div id="inner"></div>
    </div
</div>

Answer 1

我想我不确定你在寻找什么 - 但我尝试了这个FIDDLE。

我浮动了剩下的主要div，然后给了容器一个最小宽度和最大宽度。

你能提供更多细节吗？

CSS

html, body {
    width: 100%;
    height: 100%;
    background-color: #333;
}
#container {
    height: 100%;
    min-width: 600px;
    max-width: 1200px;
}
#sidebar {
    float: left;
    height: 100%;
    width: 100px;
    background-color: #9b59b6;
}
#content {
    float: left;
    width: 82%;
    background-color: red;
  overflow: hidden;}
#inner {
    width: 80%;
    margin-right: auto;
    margin-left: auto;
    background-color: gray;
    height: 1000px;
    padding: 10px;
}
img {
  display: block;
    width: 300px;
    margin: 20px auto;
}

将固定的PX侧栏与基于百分比的内容混合

1 个答案: