我正在尝试使用HTML和CSS创建一个水平的100%堆积条形图.我想使用具有背景颜色和百分比宽度的DIV创建条形,具体取决于我想要绘制的值.我还希望有一个网格线来标记图表中的任意位置.
在我的实验中,我已经通过分配CSS属性使条形水平堆叠float: left.但是,我想避免这种情况,因为它似乎以混乱的方式混淆了布局.此外,当条形浮动时,网格线似乎不能很好地工作.
我认为CSS定位应该能够解决这个问题,但我还不知道该怎么做.我希望能够指定几个元素相对于其容器左上角的位置.我经常遇到这种问题(甚至在这个特定的图形项目之外),所以我想要一个方法:
作为关于表格单元格中绝对定位的这个问题的后续内容,我正试图在Firefox中使用某些东西.再一次,我大概有95%,并且只有一件小事让我无法宣布胜利.使用以下示例标记:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test</title>
<style type="text/css">
table { width:500px; border-collapse:collapse}
th, td { border:1px solid black; vertical-align: top; }
th { width:100px; }
td { background:#ccc; }
.wrap { position:relative; height:100%; padding-bottom:1em; background:#aaa; }
.manage { text-align:right; position:absolute; bottom:0; right:0; }
p{ margin: 0 0 5px 0; }
</style>
</head>
<body >
<table>
<tr>
<th>Mauris tortor nulla, sagittis ut, faucibus eu, imperdiet ut, libero.</th>
<td><div class="wrap"><p>Cras diam.</p><div …