【问题标题】：Sidebar and Content don't adjust width properly侧边栏和内容没有正确调整宽度
【发布时间】：2012-03-14 02:52:51
【问题描述】：

我目前正在使用我实际上非常基本的 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 的规则中不使用任何宽度属性来确定完美的宽度。使用它，它只是 0px，即使边距应该在两个元素之间留下 4px 的空间。将屏幕分辨率更改为任何宽屏时，使用固定宽度（或百分比）会显得很糟糕。

如果有任何提示，我将不胜感激，请随时索取更多代码、屏幕截图或类似内容。提前致谢！

编辑：JSFiddle

【问题讨论】：

标签： css layout width margin

【解决方案1】：

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

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

【讨论】：

使用这个 innerContainer 是 1px 宽，这并不真正符合我的需要。还是谢谢！
差不多了！非常感谢 :D 但现在它似乎忽略了边距并在 sideBar 和 innerContainer 之间留下 0px 空间而不是假设的 4px，它也忽略了其他边距。
因为它的表格单元 css 边距不会被应用到它上面。使用边框或填充。我不知道你的需求。希望它会有所帮助
使用填充它可以工作，但感觉就像黑客。据我所知，很久以前就已弃用使用表格进行格式化。虽然目前似乎没有其他可能。 ^^"
好的。有充分的理由可以使用桌子。既然你不能全心全意地接受它..检查这个解决方案 - 现在位置jsfiddle.net/fRBWe/24

【解决方案2】：

如果你将主要布局与间距分开怎么办？

所以..

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

【讨论】：

感谢您的回答^-^ 使用这个innerContainer-wrap 足够宽，甚至与侧边栏重叠。但是 innerContainer 仍然只有 0px 宽。

【解决方案3】：

更改了一些你的 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

【讨论】：

感谢您的回答 :) innerContainer 应该在侧边栏的右侧，所以这不是我要搜索的内容，抱歉。
如果我错了，请纠正我 - 根据我的经验（这很短，我知道！！），不使用宽度的属性 - 这是不可能的..