Question

我有一个div容器，里面有3个div元素（A，B和C）。我知道容器的宽度和A和B的宽度）问题是在某些情况下B不会出现在那种情况下我需要C来扩展以填充容器的其余部分。我如何使用直接css或者我需要使用javascript来计算宽度？

感谢。

Answer 1

在您的考试中，contaner div的宽度为400像素。 div a和div b的总宽度为495像素！

这比容器的宽度大，这就是div c仅覆盖400px的原因。

但是如果你将容器的宽度改为900px，你会发现div c占用了剩下的空间。请看一下：http://jsfiddle.net/SWQ6h/3/。

Answer 2

使用CSS 3选择器，您可以执行以下操作：

CONTAINER { width: 1000px }
CONTAINER A { width: 250px }
CONTAINER B { width: 250px }
CONTAINER C { width: 500px }
CONTAINER A + C { width: 750px } /* if C is next to A in the source, and assuming B is therefore not present, increase C's width to 750px. */

当然，此方法要求C元素紧跟在源A之后。此外，值得一提的是IE6中不支持+选择器（以及其他非常棒的CSS3东西的存储桶加载），但在IE7，IE8和所有其他A级浏览器中都支持。

我只能祈祷你已经看到了光线并且已经放弃了IE6。

Answer 3

我将使用CSS 3选择器提供另一个单独的答案。我的另一个答案，虽然简单而优雅，可能不适用于您的特定情况。

实现您正在寻找的目标的更加灵活的方法是：

CONTAINER { width: 1000px }
CONTAINER A { width: 250px }
CONTAINER B { width: 250px }
CONTAINER C { width: 750px }
CONTAINER B ~ C { width: 500px } /* if the B element is present, and is a sibling of C, reduce C's width to 500px */

这种方法唯一需要注意的是B和C元素需要是兄弟姐妹，而且，根据事物的声音，它们就在你的情况下。

Answer 4

如果您没有设置任何宽度或高度，那么除非div中有任何内容，否则div不会显示。您可以使用最小和最大宽度属性来帮助管理它。

在这种情况下，我会得到：A，B和C的div，它们没有属性，而且都是浮点数。在这些div周围，我将容器div具有定义的宽度和高度，溢出设置为隐藏。我会给出合适的A，B和C max宽度（不确定是否会出现B和C不存在且A需要填充的情况）。

Answer 5

你可以使用JQuery来计算中沿着

行的宽度

var Container = $('#container').width();
var A = $('#A').width();
var B = $('#B').width();
var C = Container - (A+B);
$('#C').css('width', C +'px');

我没有测试过，但你明白了。

如何在浮动div上设置动态宽度？

5 个答案: