html - 如何使浮动元素占据其父元素的整个宽度

Question

请看下图。

我有一个 div（边界框），其中包含两个浮动的 div，这两个 div 都向左浮动。如何使第二个浮动 div（红色的）将其宽度扩展到边界框内的所有可用空间。

现在，我正在使用 javascript，但在 CSS 中没有解决方案吗？

编辑：

这是我的 HTML 的结构

<div id='container'>
    <div id='side'>
    </div>
    <div id='main'>
    </div>
</div>

我的 CSS 或多或少类似于以下内容

#container {
     width: 100%;
     position: relative
     overflow: hidden;
}

#side {
     width: 200px;
}

#main, #side {
     float: left;
}

然后我使用jquery设置#main的宽度

$('#main').width($("#container").width() - $("#sideview-sidebar").width());

请注意，我试图避免使用 JS。

在此处输入图像描述

score 1 · Accepted Answer

漂浮#left

#left {
  float: left;
  width: 200px; /* eg. */
}

为设置边距#main，不要让它浮动。

#main {
  margin-left: 200px;
}

如果您想拥有更多的灵活性，请在中添加另一个 div #main，并设置其填充/边距。

score 0 · Accepted Answer

上面带有百分比的解决方案是最好的。关于您的填充/边距，您也只需将它们设置为百分比。那么可以举个例子：

#side
{
   width:12%; padding:0 2%; margin:2%;
}
#main
{
   width:78%; margin-right:2%
}

2 回答 2