css在一个div中定位2个div

Question

我有一个主 div 宽度为 100%，其中有 2 个 div。我的意思是，一个宽度为 200px，另一个宽度为 100%-200px；

  -----------------this is main div -------------
 |                                               |
 | ----subdiv1---- -------------subdiv2----------|
 ||              | |                            ||
 | --------------   ---------------------------- |
 |-----------------------------------------------|

subdiv1 有 200 px，subdiv2 的宽度将是剩余的空白空间。我在谷歌上搜索但找不到。

Answer 1

这是我使用 float: left 规则为最左边的 div 和 margin-left 规则为右边的 div 编写的一种可能的解决方案： http://jsfiddle.net/P4xMj/

示例 HTML：

<div id="container">
    <div id="left">
        Some content here
    </div>
    <div id="right">
        Some more content goes over here on the right. Let's make this
        content really long to see what happens when we wrap more than
        one or two line's worth. Extra text to fill the void.
    </div>
</div>

示例 CSS（背景颜色仅用于可见性）：

#container {
    background: #FF0;
    overflow: auto;
    padding: 10px;
}

#left {
    background: #0F0;
    float: left;
    width: 200px;
}

#right {
    background: #F00;
    margin-left: 210px;
}

Answer 2

您需要将 float:left; 添加到 subdiv1 中。这里有几行代码将产生您所显示的内容。

<div>
  <div style="float:left;width:200px;background:#0F0">
  SUBDIV1
  </div>
  <div style="background:#F00;">
  SUBDIV2
  </div>
</div>

简而言之，在您的 subdiv1 上使用 float:left;

Answer 3

您可以将左侧divfloat: left，并在右侧div上设置margin-left: 200px。

http://jsfiddle.net/SpxH9/

HTML：

<div id="container">
    <div id="left">left</div>
    <div id="right">right</div>
</div>

CSS：

#container {
    overflow: hidden;
}
#left {
    float: left;
    width: 200px;
}
#right {
    margin-left: 200px;
}

您可以使用另一种技术，即替换 margin-left 带有溢出：隐藏< /a>.这很有用，因为您不必在其中两次放置维度，并且它更容易适应变化。

例如，使用 10px 边框：http://jsfiddle.net/SpxH9/1/

#container {
    overflow: hidden;
}
#left {
    float: left;
    width: 200px;
}
#right {
    overflow: hidden;
}

如果您尝试使用我提到的第一种技术执行相同的操作，您会发现必须手动计算内容：http://jsfiddle.net/SpxH9/2/（并修复： http://jsfiddle.net/SpxH9/3/）

最后，#container 上的overflow:hidden 用于包含浮动。您可能希望改用clearfix。