Question

我的div里面有几个div。内部div的数量可以更改，因此外部div的高度是动态的。然后我在第一个的右边有另一个div，它的高度必须始终匹配，我想用它作为SVG画布。我在CSS中使用table-row和table-cell解决了身高问题。但是当我尝试使用Raphael或D3这样的库添加SVG时，布局完全破坏了。我尝试了几种在线建议的变体和修复，但没有成功：如果画布div没有改变大小，那么SVG不能正确填充它。请帮忙。我很难理解HTML和CSS布局。

您可以在此处查看问题：http://jsfiddle.net/ofuh701p/4/，点击按钮。黑色应该全部变成红色，没有任何布局变化。

以下是同一问题的另一个更简单的例子：http://jsfiddle.net/88f2L4h1/。在这种情况下，我使用https://stackoverflow.com/a/8418039/2482744的解决方案来实现相等的高度div。

Answer 1

您可以使用clientWidth和clientHeight将SVG元素的宽度和高度显式设置为与其父容器相同的值。

这是使用D3演示它的小提琴。

http://jsfiddle.net/ofuh701p/8/

Answer 2

这就是我想要的东西：

http://jsfiddle.net/ofuh701p/6/

我希望只用CSS就可以解决这个问题，因为这似乎是一个非常简单的要求，我无法理解为什么SVG会如此混乱。此解决方案使用javascript动态设置基于DOM元素的高度，这些元素感觉像是黑客：

var c = Raphael("braces-canvas", 50, $("#selectable-container").outerHeight());

此外div现在正在使用display: inline-block。

如何在具有相同高度的div旁边添加SVG画布而不会弄乱布局

2 个答案: