Question

我想把图表放到align = right中，其余的html包含应该从页面的开头开始

<HTML>
<head>
<meta charset="utf-8">
<body bgcolor="#E6E6FA"><style>
strong { font-weight: bold; }
#circle {
background: #f00;
width: 20px;
height: 20px;
border-radius: 50%;
}
#circle1 {
background:  #00FF00;
width: 20px;
height: 20px;
border-radius: 50%;
}

.chart{
border: solid thin silver;
width: 450px;
height: 300px;
padding: 10px;
}
.column{
width: 80px;
height: 100%;
margin: 2px 5px;
float: left;
position: relative;
}

.column .fill{
width: 100%;
position: absolute;
bottom: 0px;
}
.label{
text-align: center;
}

</style> <div class="chart" >
<div class="column-container">
    <div class="column">
        <div class="fill"></div>
        <p class="rotulo">PASS</p>
    </div>
    <div class="column">
        <div class="fill"></div>
        <p class="rotulo">FAIL</p>
    </div>
    <div class="column">
        <div class="fill"></div>
        <p class="rotulo">SKIPPED</p>
    </div>      
</div>
</div>
<style type="text/css">
.column:nth-child(1) .fill{
    background: green;
    height: 100%;
}
.column:nth-child(2) .fill{
    background: red;
    height: 0%;
}
.column:nth-child(3) .fill{
    background: blue;
    height: 0%;
}   
</style><title>RTS REPORT</title><P><B>TEST SUMMARY</B></p><TABLE CELLPADDING='1'   CELLSPACING='1' BORDER='1' bordercolor=black width='30%' id="my_table"><tr><td><B>AUT:  </td><td>kolps12 x86_64 GNU/Linux</td><B></tr>
<tr><td><B>Version: </td><td>Gold Utility R2.1.3</B></td></tr>
<tr><td><B>Date </td><td>Tue Sep  9 17:34:47 2014<B></td></tr>
</table>
<BR></BR><TABLE CELLPADDING='1' CELLSPACING='1' BORDER='1' bordercolor=black width='30%' id="my_table"><thead><tr bgcolor="#6495ED"><th colspan="2">TEST_SUMMARY</th></tr></thead>
<tr><td><B>Total Use Cases  </td><td>1</B></td></tr>
<tr><td><B>Total Tests: </td><td>1</B></td></tr>
<tr><td><B>Total Tests Passed:  </td><td>1</B></td></tr>
<tr><td><B>Total Tests Failed:  </td><td>0</B></td></tr>
<tr><td><B>Total To-Dos:    </td><td>0</B></td></tr>
<tr><td><B>Total Skipped:   </td><td>0</B></td></tr>
<tr><td><B>Total Parse Errors:  </td><td>0</B></td></tr>
<tr><td><B>Exit Status: </td><td>0</B></td></tr>
<tr><td><B>Wait Status: </td><td>0</B></td></tr>
<tr><td><B>Elapsed time:    </td><td>26 Sec</B></td></tr>
<tr><td><B>Percentage Passed %: </td><td>100<B></td></tr>
</table>
<BR></BR>




    <TABLE CELLPADDING='1' CELLSPACING='1' BORDER='1' bordercolor=black width='100%'  id="my_table1"><tr bgcolor="#00CC00"><td style="width: 95%;"><B>Test Summary for /data/mmukherj/RTS/bin/../test_suite/UC1.1.t</td><td style="width: 5%;">STATUS</B></td></tr>
    <tr tr style="color: #3399CC ; "><td style="width: 95%;"># Starting UC 1.1</td><td style="width: 5%;"></td></tr>
    <tr tr style="color: #3399CC ; "><td style="width: 95%;"># Test Case EDMI_PWC_TC01 Started</td><td style="width: 5%;"></td></tr>
    <tr style="color: #00CC00; "><td style="width: 95%;">ok 1 - Customer with id 2035 created with  TLA 4049 and sub 4050 with Products P_EUR_STD and NWS_Electrical_Power</td><td align="middle" style="width: 5%;"><div id="circle1"></div></td></tr>
    <tr style="color: #00CC00; "><td style="width: 95%;"> ok 2 - Sub ac LC state is DEPLOYED</td><td align="middle" style="width: 5%;"><div id="circle1"></div></td></tr>
    <tr style="color: #00CC00; "><td style="width: 95%;">ok 3 - Sub ac LC sub state is STD</td><td align="middle" style="width: 5%;"><div id="circle1"></div></td></tr>
<tr style="color: #00CC00; "><td style="width: 95%;">ok 4 - For Sub acc 4050 METER_CAPABILITY attribute is ERC</td><td align="middle" style="width: 5%;"><div id="circle1"></div></td></tr>
    <tr style="color: #00CC00; "><td style="width: 95%;">ok 5 - For Sub acc 4050 EMERGENCY_CREDIT_FLAG attribute is true</td><td align="middle" style="width: 5%;"><div id="circle1"></div></td></tr>
    <tr style="color: #00CC00; "><td style="width: 95%;">ok 6 - For Sub acc 4050 METER_CONNECTIVITY_DEFAULT attribute is NND</td><td align="middle" style="width: 5%;"><div id="circle1"></div></td></tr>
    <tr style="color: #00CC00; "><td style="width: 95%;">ok 7 - For Sub acc 4050 SYNCHRONIZATION_FAILED attribute is false</td><td align="middle" style="width: 5%;"><div id="circle1"></div></td></tr>
    <tr style="color: #00CC00; "><td style="width: 95%;">ok 8 - For TLA 4049   'Product Sold' and  'Currency' attributes are present</td><td align="middle" style="width: 5%;"><div id="circle1"></div></td></tr>
    <tr style="color: #00CC00; "><td style="width: 95%;">ok 1 - EDMI_PWC_TC01</td><td align="middle" style="width: 5%;"><div id="circle1"></div></td></tr>
    <tr tr style="color: #3399CC ; "><td style="width: 95%;"># Test case EDMI_PWC_TC01 finished</td><td style="width: 5%;"></td></tr>
    <tr tr style="color: #3399CC ; "><td style="width: 95%;"># Test Suite 1.1 Finished </td><td style="width: 5%;"></td></tr>

Answer 1

JSFiddle - DEMO或SHOW

您可以float:right;使用.chart

<强> HTML：

<body bgcolor="#E6E6FA">
    <style>
        strong {
            font-weight: bold;
        }
        #circle {
            background: #f00;
            width: 20px;
            height: 20px;
            border-radius: 50%;
        }
        #circle1 {
            background: #00FF00;
            width: 20px;
            height: 20px;
            border-radius: 50%;
        }
        .chart {
            border: solid thin silver;
            width: 450px;
            height: 300px;
            padding: 10px;
            float:right;
        }
        .column {
            width: 80px;
            height: 100%;
            margin: 2px 5px;
            float: left;
            position: relative;
        }
        .column .fill {
            width: 100%;
            position: absolute;
            bottom: 0px;
        }
        .label {
            text-align: center;
        }
    </style>
    <div class="chart">
        <div class="column-container">
            <div class="column">
                <div class="fill"></div>
                <p class="rotulo">PASS</p>
            </div>
            <div class="column">
                <div class="fill"></div>
                <p class="rotulo">FAIL</p>
            </div>
            <div class="column">
                <div class="fill"></div>
                <p class="rotulo">SKIPPED</p>
            </div>
        </div>
    </div>
    <style type="text/css">
        .column:nth-child(1) .fill {
            background: green;
            height: 100%;
        }
        .column:nth-child(2) .fill {
            background: red;
            height: 0%;
        }
        .column:nth-child(3) .fill {
            background: blue;
            height: 0%;
        }
    </style>
    <title>RTS REPORT</title>
    <P>
        <B>TEST SUMMARY</B></p><TABLE CELLPADDING='1'   CELLSPACING='1' BORDER='1' bordercolor=black width='30%' id="my_table"><tr><td><B>AUT:  </td><td>kolps12 x86_64 GNU/Linux</td><B></tr>
<tr><td><B>Version: </td><td>Gold Utility R2.1.3</B></td></tr>
<tr><td><B>Date </td><td>Tue Sep  9 17:34:47 2014<B></td></tr>
</table>
<BR></BR><TABLE CELLPADDING='1' CELLSPACING='1' BORDER='1' bordercolor=black width='30%' id="my_table"><thead><tr bgcolor="#6495ED"><th colspan="2">TEST_SUMMARY</th></tr></thead>
<tr><td><B>Total Use Cases  </td><td>1</B></td></tr>
<tr><td><B>Total Tests: </td><td>1</B></td></tr>
<tr><td><B>Total Tests Passed:  </td><td>1</B></td></tr>
<tr><td><B>Total Tests Failed:  </td><td>0</B></td></tr>
<tr><td><B>Total To-Dos:    </td><td>0</B></td></tr>
<tr><td><B>Total Skipped:   </td><td>0</B></td></tr>
<tr><td><B>Total Parse Errors:  </td><td>0</B></td></tr>
<tr><td><B>Exit Status: </td><td>0</B></td></tr>
<tr><td><B>Wait Status: </td><td>0</B></td></tr>
<tr><td><B>Elapsed time:    </td><td>26 Sec</B></td></tr>
<tr><td><B>Percentage Passed %: </td><td>100<B></td></tr>
</table>
<BR></BR>




    <TABLE CELLPADDING='1' CELLSPACING='1' BORDER='1' bordercolor=black width='100%'  id="my_table1"><tr bgcolor="#00CC00"><td style="width: 95%;"><B>Test Summary for /data/mmukherj/RTS/bin/../test_suite/UC1.1.t</td><td style="width: 5%;">STATUS</B></td></tr>
    <tr tr style="color: #3399CC ; "><td style="width: 95%;"># Starting UC 1.1</td><td style="width: 5%;"></td></tr>
    <tr tr style="color: #3399CC ; "><td style="width: 95%;"># Test Case EDMI_PWC_TC01 Started</td><td style="width: 5%;"></td></tr>
    <tr style="color: #00CC00; "><td style="width: 95%;">ok 1 - Customer with id 2035 created with  TLA 4049 and sub 4050 with Products P_EUR_STD and NWS_Electrical_Power</td><td align="middle" style="width: 5%;"><div id="circle1"></div></td></tr>
    <tr style="color: #00CC00; "><td style="width: 95%;"> ok 2 - Sub ac LC state is DEPLOYED</td><td align="middle" style="width: 5%;"><div id="circle1"></div></td></tr>
    <tr style="color: #00CC00; "><td style="width: 95%;">ok 3 - Sub ac LC sub state is STD</td><td align="middle" style="width: 5%;"><div id="circle1"></div></td></tr>
<tr style="color: #00CC00; "><td style="width: 95%;">ok 4 - For Sub acc 4050 METER_CAPABILITY attribute is ERC</td><td align="middle" style="width: 5%;"><div id="circle1"></div></td></tr>
    <tr style="color: #00CC00; "><td style="width: 95%;">ok 5 - For Sub acc 4050 EMERGENCY_CREDIT_FLAG attribute is true</td><td align="middle" style="width: 5%;"><div id="circle1"></div></td></tr>
    <tr style="color: #00CC00; "><td style="width: 95%;">ok 6 - For Sub acc 4050 METER_CONNECTIVITY_DEFAULT attribute is NND</td><td align="middle" style="width: 5%;"><div id="circle1"></div></td></tr>
    <tr style="color: #00CC00; "><td style="width: 95%;">ok 7 - For Sub acc 4050 SYNCHRONIZATION_FAILED attribute is false</td><td align="middle" style="width: 5%;"><div id="circle1"></div></td></tr>
    <tr style="color: #00CC00; "><td style="width: 95%;">ok 8 - For TLA 4049   'Product Sold' and  'Currency' attributes are present</td><td align="middle" style="width: 5%;"><div id="circle1"></div></td></tr>
    <tr style="color: #00CC00; "><td style="width: 95%;">ok 1 - EDMI_PWC_TC01</td><td align="middle" style="width: 5%;"><div id="circle1"></div></td></tr>
    <tr tr style="color: #3399CC ; "><td style="width: 95%;"># Test case EDMI_PWC_TC01 finished</td><td style="width: 5%;"></td></tr>
    <tr tr style="color: #3399CC ; "><td style="width: 95%;"># Test Suite 1.1 Finished </td><td style="width: 5%;"></td></tr>

Answer 2

你的代码有很多错误。下面是你可以使用的工作代码---（并使用float：对于目的）

<HTML>
<head>
<meta charset="utf-8">
<title>RTS REPORT</title>
<style>
strong { font-weight: bold; }
#circle {
background: #f00;
width: 20px;
height: 20px;
border-radius: 50%;
}
#circle1 {
background:  #00FF00;
width: 20px;
height: 20px;
border-radius: 50%;
}

.chart{
border: solid thin silver;
width: 450px;
height: 300px;
padding: 10px;
float: right;
}
.column{
width: 80px;
height: 100%;
margin: 2px 5px;
float: left;
position: relative;
}

.column .fill{
width: 100%;
position: absolute;
bottom: 0px;
}
.label{
text-align: center;
}

.column:nth-child(1) .fill{
background: green;
height: 100%;
}
.column:nth-child(2) .fill{
background: red;
height: 0%;
}
.column:nth-child(3) .fill{
background: blue;
height: 0%;
}   

</style> 
</head>
<body>
<div class="chart" >
<div class="column-container">
<div class="column">
<div class="fill"></div>
<p class="rotulo">PASS</p>
</div>
<div class="column">
<div class="fill"></div>
<p class="rotulo">FAIL</p>
</div>
<div class="column">
<div class="fill"></div>
<p class="rotulo">SKIPPED</p>
</div>      
</div>
</div>
<P><B>TEST SUMMARY</B></p><TABLE CELLPADDING='1'  
CELLSPACING='1' BORDER='1'         
bordercolor=black width='30%' id="my_table">
<tr><td><B>AUT:  </td><td>kolps12 x86_64 GNU/Linux</td><B></tr>
<tr><td><B>Version: </td><td>Gold Utility R2.1.3</B></td></tr>
<tr><td><B>Date </td><td>Tue Sep  9 17:34:47 2014<B></td></tr>
</table>
<BR></BR>
<TABLE CELLPADDING='1' 
CELLSPACING='1' BORDER='1' 
bordercolor=black;width='30%'  id="my_table">
<thead>
<tr bgcolor="#6495ED"><th colspan="2">TEST_SUMMARY</th>     </tr></thead>
<tr><td><B>Total Use Cases  </td><td>1</B></td></tr>
<tr><td><B>Total Tests: </td><td>1</B></td></tr>
<tr><td><B>Total Tests Passed:  </td><td>1</B></td></tr>
<tr><td><B>Total Tests Failed:  </td><td>0</B></td></tr>
<tr><td><B>Total To-Dos:    </td><td>0</B></td></tr>
<tr><td><B>Total Skipped:   </td><td>0</B></td></tr>
<tr><td><B>Total Parse Errors:  </td><td>0</B></td></tr>
<tr><td><B>Exit Status: </td><td>0</B></td></tr>
<tr><td><B>Wait Status: </td><td>0</B></td></tr>
<tr><td><B>Elapsed time:    </td><td>26 Sec</B></td></tr>
<tr><td><B>Percentage Passed %: </td><td>100<B></td></tr>
</table>
<BR></BR>




<TABLE cellpadding='1' 
CELLSPACING='1' BORDER='1' bordercolor=black
width='100%'      id="my_table1"><tr           bgcolor="#00CC00">
<td style="width: 95%;">
<B>Test Summary for /data/mmukherj/RTS/bin/../test_suite  /UC1.1.t</td
><td style="width: 5%;">STATUS</B></td></tr>
<tr tr style="color: #3399CC ; "><td style="width: 95%;"># Starting UC 1.1</td>
<td    style="width: 5%;"></td></tr>
<tr tr style="color: #3399CC ; "><td style="width: 95%;">
 # Test Case EDMI_PWC_TC01   Started</td><td style="width: 5%;"></td></tr>
<tr style="color: #00CC00; "><td style="width: 95%;">ok 1 - 
Customer with id 2035 created with  TLA 4049 and 
sub 4050 with Products P_EUR_STD and      NWS_Electr
ical_Power</td><td align="middle" style="width: 5%;">
<div id="circle1">               </div>        </td></tr>
<tr style="color: #00CC00; "><td style="width: 95%;"> ok 2 - Sub ac L
C state is DEPLOYED</td><td align="middle" style="width: 5%;">
<div id="circle1"></div>  </td></tr>
</body>
</html>

CSS chart align = right

2 个答案:

JSFiddle - DEMO或SHOW