CSS中的動態和固定大小

Question

我需要在同一個HTML行中有2個div：一個將保持相同的寬度，而另一個的大小將在最終用戶增加網頁后增加。

所以我在這里定義了一個div和2個div：

<div>
    <div style="float:left" width="20px">first div</div>
    <div style="float:left" width="100%">first div</div>
</div>

但它不起作用！

如何在同一行創建2個div，其中一個是固定大小而另一個是相對的？

Answer 1

我贏嗎？

現場演示

現場演示＃2 （使用類並支持多個實例）

HTML：

<div id="divHolder">
    <div id="div1">1</div>
    <div id="div2">2</div>
</div>

CSS：

#divHolder {
    overflow: auto
}
#div1 {
    float: left;
    width: 20px;
    background: #ccc
}
#div2 {
    margin-left: 20px;
    background: #888
}

Answer 2

看看這個： http ： //jsfiddle.net/Shaz/GaZYt/2/

左側框將根據剩余的水平空間來改變大小。 右側框的最小和最大寬度始終為200px。

Answer 3

嘗試在div元素上設置display：inline。 div的默認顯示值是block（導致它們出現在單獨的行上）。 這是一個關於js小提琴的例子

Answer 4

我相信你可能需要使用Javascript來處理這種情況。

$(window).resize(function() {
  var $left = $('#left');
  var $container = $('#container');
  $right.width($container - $left);
});