DEMO

Question

我目前正在使用我非常基本的CSS进行圈子运行。我正在为邮件客户端编写一个前端，并得到一个包含侧边栏和“innerContainer”的主（主体）容器，它应该填充侧边栏后面留下的空间。

重要的HTML：

    <div id="outerContainer">
        <div id="sideBar">
        </div>
        <div id="innerContainer">
            <!-- not important ;D -->
        </div>
    </div>

重要的CSS：

#sideBar {
    margin: 4px 2px 4px 4px;
    height: 644px;
    width: 14%;
    min-width: 220px;
    border-radius: 4px;
    background-color: #fff;
    float: left;
}

#innerContainer {
    margin: 4px 4px 4px 2px;
    height: 644px;
    border-radius: 4px;
    background-color: #fff;
    float: right;
}

我目前正试图通过不在#innerContainer的规则中使用任何width-property来让客户端确定完美的宽度。使用它，它只是0px，即使边距应该在两个元素之间留下4px的空间。使用固定宽度（或百分比）使屏幕分辨率更改为宽屏时看起来很糟糕。

我会很感激任何提示，随时请求更多代码，屏幕截图或类似的东西。提前谢谢！

编辑：JSFiddle

Answer 1

改变了你的css ..这是新的css

body , html{
width:100%;
height:auto;
}

#sideBar {
margin: 0px 2px 4px 4px;
height: 644px;
width: 14%;
min-width: 220px;
border-radius: 4px;
background-color: black;
float: left;
}

#innerContainer {
margin: 4px 4px 4px 2px;
height: 644px;
border-radius: 4px;
background-color: pink;
}

您可以在此处查看演示

DEMO

Answer 2

#sideBar {
  float:left;
}
#innerContainer {
  display:table-cell;
  zoom:1;/*for IE*/
}

检查一下 - http://jsfiddle.net/fRBWe/11/

Answer 3

如果从间距中拆分主要布局怎么办？

所以......

<div id="outerContainer">
    <div id="sideBar-wrap">
        <div id="sideBar">
        </div>
    </div>
    <div id="innerContainer-wrap">
        <div id="innerContainer">
            <!-- not important ;D -->
        </div>
    </div>
</div>

然后

#sideBar-wrap {
    height: 644px;
    width: 14%;
    min-width: 220px;
    float: left;
}
#sideBar {
    margin: 4px 2px 4px 4px;
    background-color: #fff;
    border-radius: 4px;

}
#innerContainer-wrap {
    margin: 4px 4px 4px 2px;
    height: 644px;
    float: right;
}
#innerContainer {
    border-radius: 4px;
    background-color: #fff;
}

边栏和内容无法正确调整宽度

3 个答案:

DEMO