logo标签列表

如何使左侧的div扩展，右侧的div保持固定宽度？

htmlcss
4

正如标题所述，我想将两个div放在一起，左边的div会随着窗口的扩大而扩大，而右边的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>

这将产生以下结果：

如果你看不到这个图片，那太遗憾了 :(

理想情况下，绿色正方形和蓝色正方形应该顶部对齐。我找到的一个解决方案是在绿色div上设置负margin-top属性，这样就可以解决问题……但前提是蓝色div的高度永远不变。不幸的是，在我的情况下，蓝色div的高度实际上会发生变化。

有没有什么办法可以解决这个问题？我很难理解CSS定位的复杂性 :(

5个回答
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>

1
如果您可以使用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/

0
你可以这样做。
如果这是你的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的情况下坍塌。

0

使用 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/ 希望能对你有所帮助。
0

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

1）将 div 的第一个子元素浮动

2）在第二个子元素上设置overflow:auto（或 hidden）以填充剩余的宽度

因此，这也可以工作：

FIDDLE

Markup:

<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 - 这样你就可以在蓝色区域输入文字，并且看到它会根据需要自动扩展。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接