css定位网页设计

Question

我必须在一些CSS和一个Javascript文件中进行更改。我有一个标题行和一些列，当我缩放对象时，标题不再与列在一起。因此，我必须用列来修复标题，它们位于CSS的不同类中。这是picture的链接。这是Qlikview的代码。

.c6graph {  

margin-left: 7px;
margin-top: 5px;
width:100%;
height:100%;
 }

    /* Start of "Micro clearfix" */

    .cf { zoom: 0; }
    .cf:before,
    .cf:after { content: ""; display: table; }
    .cf:after { clear: both; }

    /* End of "Micro clearfix" */


       .e6headerrow {
           font-size:8pt; 
            font-family:Tahoma;
           font-weight:bold;

          padding: 5px;}

       .e6firstcolumn {
            text-align: left;
            width: 14% !Important;
            max-width: 14%; 
            min-width: 14%;}
      .e6thirdforthcolumn {display:inline-block;
        text-align: center;
         width: 43% !Important;
        max-width: 43%; 
        min-width: 43%;}

`下面是调用这个css类的javascript部分

    var html = "<table class='c6graph cf' cellpadding=0 cellspacing=0><colgroup ><col      class='e6headerrow e6firstcolumn''/><col class='e6headerrow e6thirdforthcolumn'/><col class='e6headerrow e6thirdforthcolumn'/></colgroup>"; 

      html += "<tr>" + firstColumnHeader + "<td class='e6headerrow e6thirdforthcolumn' >" + thirdColumnValue + "</td><td class='e6headerrow e6thirdforthcolumn' >" + fourthColumnValue + "</td></tr>";
    htmlFirstColumn = "<td class='e6thirdforthcolumn' ><div class='ext neg'><div style='width: " 
            + widthValue1 + ";' class='bar " + (isSwitchBorder == 1 ? "border-neg" : "") + "'></div><div class='progressneg " + progressRounded + "'>" + row[1].text + "</div></div></td>"; 
        }
        else {
            htmlFirstColumn = "<td class='e6thirdforthcolumn' ><div class='ext pos'><div style='width: " 
            + widthValue1 + ";' class='bar "+ (isSwitchBorder == 1 ? "border-pos" : "") + "'></div><div class='progresspos  " + progressRounded + "'>" + row[1].text + "</div></div></td>";
        }

        var widthValue2 = Math.abs(parseInt(row[2].text))*factorTotvar + "%";
        var htmlSecondColumn = "";
        if(row[2].text.substring(0,1) == "-") {
            htmlSecondColumn = "<td class='e6thirdforthcolumn' ><div class='ext neg'><div style='width: " 
            + widthValue2 + ";' class='bar "+ (isSwitchBorder == 1 ? "border-neg" : "") + "'></div><div class='progressneg  " + progressRounded3 + "'>" + row[2].text + "</div></div></td>";    
        }
        else {
            htmlSecondColumn = "<td class='e6thirdforthcolumn' ><div class='ext pos'><div style='width: " 
            + widthValue2 + ";' class='bar "+ (isSwitchBorder == 1 ? "border-pos" : "") + "'></div><div class='progresspos  " + progressRounded3 + "'>" + row[2].text + "</div></div></td>";
        }


        var firstColumnRow = (isDimensionEnabled != 1 ? "<td class='e6firstcolumn'>" + dimensionBolded + "</td>" : "");
        html += "<tr>" + firstColumnRow;
        html +=htmlFirstColumn;
        html +=htmlSecondColumn;
        html +="</tr>";     

Answer 1

我是一个能够发表评论的人，所以我会把这篇文章作为答案。

您的javascript部分缺少代码片段、变量firstColumnHeader的定义以及htmlFirstColumn周围的if then的前半部分。我假设它是在剪切和粘贴错误中丢失的，并且代码不是很糟糕，因为你有一些输出。

如果不是发布构建html的javascript，而是查看源代码并粘贴由javascript生成的html代码，这将有所帮助。

在我看来，看起来您没有以相同的方式格式化列标题和表列，这就是它们呈现方式不完全相同的原因。