Question

我有一个主div有100％的宽度，并有2个div。一个宽度为200px，另一个宽度为100％-200px，我的意思是;

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

subdiv1有200 px，subdiv2的宽度将是其余的空白空间。我搜索谷歌但无法找到。

Answer 1

以下是我使用最左侧div的float: left规则以及右侧div的margin-left规则进行攻击的一种可能解决方案：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>

简而言之，请在float:left;

上使用subdiv1

Answer 3

您可以float: left左侧div，margin-left: 200px位于右侧div。

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 with overflow: hidden。这很有用，因为您不必在那里有两次维度，并且它更容易适应变化。

例如，使用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/）

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

css在div中定位2个div

3 个答案: