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

我赢了吗？

Live Demo

Live Demo #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 fiddle

上的示例

Answer 4

我相信你可能需要使用Javascript来处理这种情况。

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

CSS中的动态和固定大小

4 个答案: