html - CSS 图表 align=right

标签 html css

我想将图表置于 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>

最佳答案

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>

关于html - CSS 图表 align=right，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25744669/

上一篇：HTML 表格，右对齐单元格(不是内容)

下一篇：html - 两个固定高度/宽度 div 之间的 flex div

相关文章：

Javascript动画背景不覆盖整个屏幕

javascript - 为html中的元素制作边框 block

css - div 高度 100% 但不超过绝对粘性页脚

css - 在 Firefox 上宽度不缩放

javascript - 悬停时播放 HTML5 视频

css - 为什么在检查元素时只显示 css 文件？

php - 如何从网页隐藏[处理此指令时发生错误]

java - 转换为 PDF 时 iText XMLWorker 表异常

html - 为什么在我的 GET 请求中有额外的参数 x 和 y？

css - 媒体查询适用于 firefox，但 chrome 获取错误的分辨率/查询

©2024 IT工具网  联系我们