如何使左div擴展而右div具有恆定寬度？

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>

產生這個：

如果你看不到這個很難過:(

理想情況下，綠色正方形和藍色正方形應使其頂部彼此對齊。 我找到的一個解決方案是在綠色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元素中的#right具有特定的尺寸，因此絕對位於父#content元素的右上角，該元素具有position: relative對於設置絕對定位的參考點。

在父塊中添加一個最小高度，以防止它在#left塊高度小於100px的情況下折疊。

Answer 4

使用flexbox怎么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在第二個子節點上overflow:auto （或隱藏）以填充剩余寬度

所以這也會起作用：

小提琴

標記：

<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 個解決方案

解決方案1
1 2014-07-13 01:16:41

解決方案2
1 已采納 2014-07-13 01:47:39

解決方案3
0 2014-07-13 01:32:24

解決方案4
0 2014-07-13 05:04:51

解決方案5
0 2014-07-13 07:16:46

標記：

CSS

如何使左div擴展而右div具有恆定寬度？

問題描述

5 個解決方案

解決方案1 1 2014-07-13 01:16:41

解決方案2 1 已采納 2014-07-13 01:47:39

解決方案3 0 2014-07-13 01:32:24

解決方案4 0 2014-07-13 05:04:51

解決方案5 0 2014-07-13 07:16:46

標記：

CSS

解決方案1
1 2014-07-13 01:16:41

解決方案2
1 已采納 2014-07-13 01:47:39

解決方案3
0 2014-07-13 01:32:24

解決方案4
0 2014-07-13 05:04:51

解決方案5
0 2014-07-13 07:16:46