Question

我在div（half）内的div（graphdiv）内有一个表（graphtable）。

当我使用jquery res缩小一半时，graphtable和graphdiv的大小都会增加。但是，使用谷歌开发人员工具，这些元素的实际css已更改为正确的大小。

最低div表中的

是一个dygraph，当它的类调用resize函数时，它应调整到它的父级。

我对css如何说一件事而我能看到另一件事感到茫然？

for(var i = 0; i<graphArray.length-1; i++){
    $( "#"+i ).resize(function() {
        var height = $(this).height();
        var width = $(this).width();
        $(this).find(".graph").height(height);
        $(this).find(".graph").width(width*0.68);
        $(this).find(".graph").find(".graphtable").height(height);
        $(this).find(".graph").find(".graphtable").width(width*0.68);
        window.graphArray[$(this).attr('id')].resize();
    });
}

.half{
background-color:#F2F2F2; 
width:48%;
height:50%;
border: 1px solid;
margin-top:1%;
float:left;
}
.graph{
width: 68%;
height: 100%;
float: left;
display:table;
}
.graphtable{
background-color:#F5F5F5; 
width:100%;
height:100%;
}

<?php
echo "<div class='half' id='$i' name='".$graph['graph_id']."' style='position:absolute; top:".$top."px; left:".$left."px'>";
echo "<div id='graph' class='graph'>";
echo "<table id='graphtable$i' class='graphtable' style='width:100%; height:100%'></table>";
echo '</div>';
echo '<div class="dragger">Drag</div>';
echo '<div class="resizer">+</div>';
echo '</div>';
?>

我也在图形div和graphTable上使用.atrr，但没有运气。

Answer 1

dygraphs仅在窗口调整大小时重绘。（不幸的是，没有任何事件可以听取更多一般的<div>调整大小。）

您可以通过调用dygraph上的resize()告诉它重新检查其包含的div来解决此问题。

Answer 2

显然dygraph绑定了另一个div，所以我在下面添加了两行来修复resize问题。我确信有一个更好的方法来做我在这里所做的事情，但目前它的工作原理。我将在以后处理表现

for(var i = 0; i<graphArray.length-1; i++){
    $( "#"+i ).resize(function() {
        var height = $(this).height();
        var width = $(this).width();
        $(this).find(".graph").height(height);
        $(this).find(".graph").width(width*0.68);
        $(this).find(".graph").find(".graphtable").height(height);
        $(this).find(".graph").find(".graphtable").width(width*0.68);
        $(this).find(".graph").find(".graphtable").find("div").width(width*0.68); //added
        $(this).find(".graph").find(".graphtable").find("div").height(height); //added
        window.graphArray[$(this).attr('id')].resize();
    });
}

CSS表和父div不遵循它们的高度和宽度属性？ Jquery可调整大小

2 个答案: