使用生成的div

时间：2015-06-08 18:28:41

标签： html css

需要帮助正确格式化... 因此，该网页/应用程序生成一小组框，用作趋势资源使用的基本图。

gHolder和graphContainer是固定的，graphBar类每秒生成一次，直到固定数量的条形图（为简洁起见，我只包括一些） 最后，一个框中应该有一个总体百分比（也是用Javascript生成的）

目前，如果我的固定数量的graphBar条目小于我期望的最小屏幕分辨率，我可以使这个工作。

我喜欢这个动态大小...但不幸的是，当我尝试使容器等于可用区域的大小时...它要么留下一个很大的空白区域......或者如果我有更多的graphBar然后它可以显示它包装它们而不是隐藏溢出。

我目前使用CSS Table函数，我认为这个问题......但我似乎无法以任何其他方式使这项工作。

一般形状的图像：

CPU Graph

基本HTML结构：

<div class="gHolder">
  <div class="graphContainer" id="CPUHistoryGraph">
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:7px;"></div>
    <div class="graphBar percent_low" style="height:5px;"></div>
  </div>
  <div class="graphSingle" id="status_miniCPUgraph" style="width: 5px;"></div>
</div>

这是问题的一个方面。请与它一起玩，看看你是否能想出一个好的做事方式：

https://jsfiddle.net/84recnzg/

1 个答案:

答案 0 :(得分：1)

您可以通过更改您提供的JSFiddle中的CSS样式来实现此目的。例如，一些更改将是：

  • 为父级添加一些position：relative，为内部的框添加absolute。
  • 为.graphContainer设置一个非常大的宽度。
  • 为父级设置overflow为hidden。

＆＃13;
＆＃13; 
.gHolder {
    height: 102px;
    border: 1px solid #555;
    position:relative;
    width:auto;
    overflow:hidden;    
}

.graphContainer {
    width: 100000px;
    height:0px;
    position:absolute;
    bottom:0px;
    right:100px;
    display: table-cell;
    vertical-align: bottom;
    border-right: 0px;
    cursor: pointer;
    margin-bottom: 16px;
    text-align: right;
    overflow: visible;
}

.graphInfo {
    width: 100px;
    position:absolute;
    top:0;
    right:0;
    display: table-cell;
    height: 102px;
    vertical-align: middle;
    border-left: 0px;
    background-color: #F00;
}
.graphBar {
    position: relative;
    width: 7px;
    display: inline-block;
    background-color: blue;
    margin-right: 0px;
}
＆＃13; 
<div class="gHolder">
  <div class="graphContainer" id="CPUHistoryGraph">
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:7px;"></div>
    <div class="graphBar percent_low" style="height:5px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:7px;"></div>
    <div class="graphBar percent_low" style="height:5px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:7px;"></div>
    <div class="graphBar percent_low" style="height:5px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:7px;"></div>
    <div class="graphBar percent_low" style="height:8px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:7px;"></div>
    <div class="graphBar percent_low" style="height:5px;"></div>
    <div class="graphBar percent_low" style="height:16px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:7px;"></div>
    <div class="graphBar percent_low" style="height:5px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:7px;"></div>
    <div class="graphBar percent_low" style="height:5px;"></div>
    <div class="graphBar percent_low" style="height:2px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:7px;"></div>
    <div class="graphBar percent_low" style="height:5px;"></div>
    <div class="graphBar percent_low" style="height:9px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:7px;"></div>
    <div class="graphBar percent_low" style="height:15px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:7px;"></div>
    <div class="graphBar percent_low" style="height:5px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:7px;"></div>
    <div class="graphBar percent_low" style="height:5px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:7px;"></div>
    <div class="graphBar percent_low" style="height:5px;"></div>
  </div>
  <div class="graphInfo">
    <div class="graphSingle" id="status_miniCPUgraph" style="width: 5px;"></div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

你可以在这个JSFiddle：https://jsfiddle.net/84recnzg/2/上看到这个例子，你仍然需要使用其余的样式来使它们合适（例如：.graphInfo框中的文本）。

但设置一个非常大的width有一个问题：如果你让它运行足够的时间，图形条的数量就足以溢出，你就会遇到两条线的问题。

一个快速解决方案是每次添加图形栏时使用JavaScript动态设置width（宽度=条形数*条形空间，条形空间的宽度为吧+与下一个酒吧的分离）。

这样的事情（我为每个酒吧使用了11px）：

document.getElementById("CPUHistoryGraph").style.width = (document.querySelectorAll(".graphBar").length * 11) + "px";

你可以在这个JSFiddle中看到：https://jsfiddle.net/84recnzg/3/

要解决以下评论中提到的问题：

  • 添加display:table并指定图表框的宽度
  • 删除图表容器的height和width

＆＃13;
＆＃13; 
function addBar() {
    
    // add a new bar with a random height
    aux = document.createElement("div");
    aux.className = "graphBar percent_low";
    aux.style.marginLeft = "4px";
    aux.style.height = Math.floor(Math.random()*99 + 1) + "px";
    document.getElementById("CPUHistoryGraph").appendChild(aux);
  
    // recalculate width for the graph area 
    document.getElementById("CPUHistoryGraph").style.width = (document.querySelectorAll(".graphBar").length * 12) + "px";
}

// recalculate width for the graph area
document.getElementById("CPUHistoryGraph").style.width = (document.querySelectorAll(".graphBar").length * 12) + "px";
＆＃13; 
.gHolder {
    height: 102px;
    border: 1px solid #555;
    position:relative;
    overflow:hidden;  
    display:table;
    width:100%;
}

.graphContainer {
    /*width:100000px;
    height:102;*/
    position:absolute;
    bottom:0;
    right:100px;
    display: table-cell;
    vertical-align: bottom;
    border-right: 0px;
    cursor: pointer;
    text-align: right;
    overflow: visible;
}

.graphInfo {
    width: 100px;
    position:absolute;
    top:0;
    right:0;
    display: table-cell;
    height: 102px;
    vertical-align: middle;
    border-left: 0px;
    background-color: #F00;
}
.graphBar {
    position: relative;
    width: 7px;
    display: inline-block;
    background-color: blue;
    margin-right: 0px;
}
＆＃13; 
<div class="gHolder">
  <div class="graphContainer" id="CPUHistoryGraph">
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:7px;"></div>
    <div class="graphBar percent_low" style="height:5px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:7px;"></div>
    <div class="graphBar percent_low" style="height:5px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:7px;"></div>
    <div class="graphBar percent_low" style="height:5px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:7px;"></div>
    <div class="graphBar percent_low" style="height:8px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:7px;"></div>
    <div class="graphBar percent_low" style="height:5px;"></div>
    <div class="graphBar percent_low" style="height:16px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:7px;"></div>
    <div class="graphBar percent_low" style="height:5px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:7px;"></div>
    <div class="graphBar percent_low" style="height:5px;"></div>
    <div class="graphBar percent_low" style="height:2px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:7px;"></div>
    <div class="graphBar percent_low" style="height:5px;"></div>
    <div class="graphBar percent_low" style="height:9px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:7px;"></div>
    <div class="graphBar percent_low" style="height:15px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:7px;"></div>
    <div class="graphBar percent_low" style="height:5px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:7px;"></div>
    <div class="graphBar percent_low" style="height:5px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:6px;"></div>
    <div class="graphBar percent_low" style="height:7px;"></div>
    <div class="graphBar percent_low" style="height:5px;"></div>
  </div>
  <div class="graphInfo">
    <div class="graphSingle" id="status_miniCPUgraph" style="width: 5px;"></div>
  </div>
</div>

<button onclick="addBar();">Add bar</button>
＆＃13;
＆＃13;
＆＃13;

你也可以在这个JSFiddle上看到它：https://jsfiddle.net/84recnzg/9/

出于某种原因，在JSFiddle中，所有条形都显示为与底部对齐，但在上面的演示中，一些似乎是1px关闭（不是全部，只是一些）。这有点奇怪。

相关问题
最新问题