Верстка колончатого графика

Рейтинг: 0Ответов: 1Опубликовано: 05.04.2011

Помогите, пожалуйста, разобраться с версткой.
Есть вот такая простенькая страница. На странице выводятся 4 колонки разной высоты, "приклеенные" к низу графика. У каждого div'а с помощью php задается высота и отступ сверху. Все работает прекрасно, но... при изменении ширины .graf столбики начинают ползать вверх-вниз. Как побороть этот недостаток?
И вопрос вдогонку: целесообразно ли в таких случаях подключать canvas?

<!doctype html>  
<html>  
<head><title></title>  
<style type="text/css">  
.graf{  
    width: 260px;  
    height: 260px;  
    padding: 20px;  
}  
.graf .graf_axes{  
    position: relative;  
    width: 100%;  
    height: 100%;  
    border: 1px #000 solid;  
    border-top: none;  
    border-right: none;  
    padding: 0 0 1px;  
}  
.graf .graf_axes .col{  
    display: inline-block;  
    float: left;  
    margin: 0 15px;  
    width: 30px;  
    border: 1px #000 solid;  
    border-bottom: none;  
}  
.graf .graf_axes .col1{background: #f00}  
.graf .graf_axes .col2{background: #0f0}  
.graf .graf_axes .col3{background: #00f}  
.graf .graf_axes .col4{background: #f80}  
</style>  
</head>  
<body>

<div class="graf">  
    <div class="graf_axes">  
        <div class="col col1" style="height:30%;margin-top:70%;">30%</div>  
        <div class="col col2" style="height:50%;margin-top:50%;">50%</div>  
        <div class="col col3" style="height:90%;margin-top:10%;">90%</div>  
        <div class="col col4" style="height:100%;margin-top:0%;">100%</div>  
    </div>  
</div>

</body>  
</html>
css javascript html canvas вёрстка
Источник: Stack Overflow на русском

Ответы

▲ 2Принят

Вот готовый кроссбраузерный вариант.

<!doctype html>
<html>
	<head>
		<title></title>
		<style type="text/css">
			.graf {
				height: 260px;
				width: 260px;
				padding: 20px;
			}
			
			.graf_axes {
				border-bottom: 1px solid #000;
				border-left: 1px solid #000;
				height: 100%;
				position: relative;
			}

			.col {
				border: 1px solid #000;
				border-bottom: none;
				width: 30px;
				overflow: hidden;
				position: absolute;
				bottom: 0;
			}

			.col1 {
				background: #f00;
				height: 30%;
				left: 20px;
			}

			.col2 {
				background: #0f0;
				height: 50%;
				left: 65px;
			}

			.col3 {
				background: #00f;
				height: 90%;
				left: 110px;
			}

			.col4 {
				background: #f80;
				height: 100%;
				left: 155px;
			}
		</style>
	</head>
	<body>
		<div class="graf">
			<div class="graf_axes">
				<div class="col col1">30%</div>
				<div class="col col2">50%</div>
				<div class="col col3">90%</div>
				<div class="col col4">100%</div>
			</div>
		</div>
	</body>
</html>

Колонки тянутся по высоте в зависимости от высоты .graf, единственное, что ширина между колонками регулируется через абсолютное положение от левого края родительского блока и никак не меняется при изменении ширины .graf, если для Вас это не критично (а как видно из предложенного Вами варианта, ширина между колонками задается в пикселях, не в процентах), то это готовый вариант, если нужно чтобы и расстояние между колонками изменялось пропорционально, то нужно покопаться.