<div class="chart">
<h3>Price for two weeks</h3>
<div class="companies">
<div class="company_scale"></div>
<div class="company1">
<span class="name">Company 1</span><span class="cost"> $78</span>
</div>
<div class="company2">
<span class="name">Company 2</span><span class="cost"> $74</span>
</div>
<div class="company3">
<span class="name">Company 3</span><span class="cost"> $60</span>
</div>
<div class="company4">
<span class="name">Company 4</span><span class="cost"> $55</span>
</div>
<div class="acme">
<span class="name">Acme Product</span><span class="cost"> $49.95</span>
</div>
</div>
</div>
Или что-то подобное.
Вы можете указать ширину с помощью CSS, а скрыть «стоимостные» классы с помощью CSS.
Я испытал желание использовать список определений, но было бы сложнее получить иерархические ассоциации в CSS.
Преимущество этой разметки заключается в том, что при визуализации без каких-либо данных стиля она сохраняет большую часть своего первоначального значения:
<h3>Price for two weeks</h3> Company 1 $78
Company 2 $74
Company 3 $60
Company 4 $55
Acme Product $49.95
Настольная модель:
Я подумал, что по крайней мере попробую предложение Liams с использованием таблиц, на самом деле оно работает довольно хорошо, просто для добавления градиентов фона, и мы готовы
Прокрутите вниз, чтобы увидеть его в действии (истекает довольно быстро) http://www.webdevout.net/test?03
Исходное содержание следует
<div class="chart">
<h3>Price for two weeks</h3>
<table class="companies">
<thead>
<tr class="titles">
<td>Company</td><td>Price</td>
</tr>
</thead>
<tbody>
<tr class="company1">
<td class="name">Company 1</td>
<td class="cost">$78</td>
</tr>
<tr class="company2">
<td class="name">Company 2</td>
<td class="cost">$74</td>
</tr>
<tr class="company3">
<td class="name">Company 3</td>
<td class="cost">$60</td>
</tr>
<tr class="company4">
<td class="name">Company 4</td>
<td class="cost">$55</td>
</tr>
<tr class="acme">
<td class="name">Acme Product</td>
<td class="cost">$49.95</td>
</tr>
</tbody>
</table>
</div>
div.chart
{
border: 1px solid #DDD;
}
div.chart table,
div.chart tbody,
div.chart thead,
div.chart tr
{
display: block;
}
div.chart td
{
display: inline-block;
overflow-x: hidden;
}
div.chart {
padding: 10px;
}
div.chart td.cost, div.chart thead td {
display: none;
}
div.chart tbody tr td {
background-color: #999;
padding: 4px;
margin-top: 16px;
text-align: right;
}
div.chart tr.company1 td {
width:260px;
}
div.chart tr.company2 td {
width:246px;
}
div.chart tr.company3 td {
width:200px;
}
div.chart tr.company4 td {
width:183px;
}
div.chart tbody tr td.cost {
display: inline-block;
background-color: inherit;
color: #F00;
font-size: 80%;
width: 80px;
}
div.chart tr.acme td {
background-color: #99F;
width: 166px;
}
div.chart tbody tr.acme td.cost {
color: #000;
background-color: #FF9;
}