Question

正如标题所说，我想把两个div放在一起，如果窗口展开则左边的一个展开，而右边的一个则保持恒定宽度。

这是我到目前为止所得到的：

<body>
    <div id="content" style="background-color: red">
        <div id="left" style="margin-right: 100px; background-color: blue">
            This</br>is</br>left.
        </div>
        <div id="right" style="float: right; width: 100px; height: 100px; background-color: green">
            This</br>is</br>right.
        </div>
        <div style="clear:both"></div>
    </div>
</bod>

产生这个：

It is quite sad if you can't see this :(

理想情况下，绿色正方形和蓝色正方形的顶部应相互对齐。我找到的一个解决方案是在绿色div上设置负边距顶部设置，这有效...但只要蓝色div不会改变高度。不幸的是，蓝色div实际上可以在我的情况下改变高度。

关于我如何解决这个问题的任何想法？我很难理解CSS定位的复杂性:(

Answer 1

你考虑过筑巢吗？

http://jsfiddle.net/bonatoc/N3xWn/

<div id="content" style="background-color: red">
    <div id="left" style=" background-color: blue">

        <div id="right" style="display:inline-block; float: right; width: 100px; height: 100px; background-color: green">
        This</br>is</br>right.
        </div>

    This</br>is</br>left.
    </div>

    <div style="clear:both"></div>

Answer 2

如果您可以使用position:absolute，则可以执行以下操作：

<div class="left">This is the left box.</div>
<div class="right">This is the right box.</div>

CSS：

.left {
  position: absolute;
  left: 0px;
  right: 100px;
}

.right {
  position: absolute;
  right: 0px;
  width: 100px;
}

http://jsfiddle.net/Q2TKU/

Answer 3

你可以这样做。

如果这是您的HTML：

<div id="content">
    <div id="left">This</br>is</br>left.</div>
    <div id="right">This</br>is</br>right.</div>
</div>

尝试以下CSS：

#content {
    background-color: red;
    position: relative;
    min-height: 100px;
}
#left {
    margin-right: 100px;
    background-color: blue;
    width: auto;
}
#right {
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100px;
    background-color: green;
}

请参阅演示：http://jsfiddle.net/audetwebdesign/GfpyL/

#right元素中的徽标具有特定尺寸，因此请将其绝对放置在具有#content的父position: relative元素的右上角，以设置绝对参考点定位。

向父块添加最小高度，以防止在#left块的高度小于100px的情况下崩溃。

Answer 4

如何使用flexbox？ flexbox可帮助您控制这些宽度灵活性。如果将左侧内容设置为100px，则右侧框宽度是灵活性。

下面的HTML：

<div id="content" >
    <div id="left">
         This<br>is<br>left.
    </div>
    <div id="right">
        This<br>is</br>right.
    </div>
</div>

下面的CSS：

#content {
    /* old*/
    display: -webkit-box;
    display: -moz-box;
    display: -ms-box;
    display: box;
    /* New */
    display: -webkit-flexbox;
    display: -moz-flexbox;
    display: -ms-flexbox;
    display: flexbox;

    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}

#left {
    /* old */
    -webkit-box-ordinal-group: 1;
       -moz-box-ordinal-group: 1;
        -ms-box-ordinal-group: 1;
            box-ordinal-group: 1;
    /* New */
    -webkit-flex-order: 1;
       -moz-flex-order: 1;
        -ms-flex-order: 1;
            flex-order: 1;

   /* Old */
    -webkit-box-flex: 1;
       -moz-box-flex: 1;
        -ms-box-flex: 1;
            box-flex: 1;

    /* New */
    width: -webkit-flex(1);
    width: -moz-flex(1);
    width: -ms-flex(1);
    width: flex(1);
 }

 #right {
      width: 100px;

      /* Old */
      -webkit-box-ordinal-group: 2;
         -moz-box-ordinal-group: 2;
          -ms-box-ordinal-group: 2;
              box-ordinal-group: 2;

      /* New */
      -webkit-flex-order: 2;
         -moz-flex-order: 2;
          -ms-flex-order: 2;
              flex-order: 2;

}

以下是jsfiddle代码： http://jsfiddle.net/sota0805/kykU7/

我希望它可以帮到你。

Answer 5

您可以使用块格式化上下文来填充剩余宽度。

1）浮动div的第一个孩子

2）在第二个孩子上设置overflow:auto（或隐藏）以填充剩余宽度

所以这也可行：

<强> FIDDLE

标记：

<div class="wpr">
    <div class="rFloat"></div>
    <div class="blue overflow" contenteditable>this is left</div>

    <div class="rFloat green">This is right</div>
    <div class="overflow"></div>
</div>

CSS

.wpr {
    background: red;
    min-width: 200px;
}
div {
    min-height: 20px;
}
.rFloat {
    width: 100px;
    float:right;
}
.blue {
    background: blue;  
}
.green {
    background: green;
}
.overflow {
    overflow: auto;
}

请注意，在小调中，我在蓝色div上将contenteditable属性设置为true - 因此您可以输入蓝色区域并看到它根据需要进行扩展。

如何使左div扩展而右div具有恒定宽度？

5 个答案:

标记：

CSS