Доброго времени суток!
Делаю максимально простой график типа "столбики" в css. Контейнер точного размера, внутри - N div-столбиков, в каждом из них - 1 div-значение, в нём ещё один div - для цифры значения.
Ниже опущу всё, кроме столбцов для простоты и сделаю их количество равным 3 (в идеале, значения берутся из mysql => количество разное).
Проблема возникает когда пытаюсь прижать к низу контейнера эти столбцы (чтобы росли снизу, а не сверху).
При css #1 столбцами можно управлять по горизонтали, но растут сверху-вниз.
При css #2 столбцы жмутся книзу при помощи bottom:0 ибо position:absolute, но накладываются друг на друга.
Почему работает неправильно я понимаю (принципы работы position, bottom, float я знаю), о не пмогу понять как решить эту загвоздку?
Спасибо!
---------- HTML ----------
<div id="container">
<div class="column">1</div>
<div class="column">2</div>
<div class="column">3</div>
</div>
---------- CSS #1 ----------
#Container {
border:1px solid #f00;
width:800px;
height:400px;
}
.column {
border:1px solid #00f;
width:33px;
height:50%;
float:left;
}
---------- CSS #2 ----------
#Container {
border:1px solid #f00;
width:800px;
height:400px;
position:absolute;
}
.column {
border:1px solid #00f;
width:33px;
height:50%;
float:left;
position:absolute;
bottom:0;
}
Примечание:
Denis_ (Denis Biryukov), выглядит очень хорошо! И работает только на html+css. Это замечательно! Да, я действительно забыл добавить, что это очень важно - обойтись без js.
Если не сложно, расскажете, в чём у меня принципиальная ошибка была? Мне важно понять ошибку, чтобы не попадаться больше :)
Списки (ul, ol) являются блочными элементами, насколько я помню. Они чем-то отличаются от тех же блочных div?
И ещё вопрос: в Вашем примере у тега ul значение position браузер сам определяет (по-умолчанию, static). Влияет ли это как-нибудь на координатную сетку для li, если между #q-fraph с position:relative находится ещё и static?
Примечание:
Хотя очень малое количество кода на JQ соблазнительно выглядит для анимации :-)
RPI.su - самая большая русскоязычная база вопросов и ответов. Наш проект был реализован как продолжение популярного сервиса otvety.google.ru, который был закрыт и удален 30 апреля 2015 года. Мы решили воскресить полезный сервис Ответы Гугл, чтобы любой человек смог публично узнать ответ на свой вопрос у интернет сообщества.
Все вопросы, добавленные на сайт ответов Google, мы скопировали и сохранили здесь. Имена старых пользователей также отображены в том виде, в котором они существовали ранее. Только нужно заново пройти регистрацию, чтобы иметь возможность задавать вопросы, или отвечать другим.
Чтобы связаться с нами по любому вопросу О САЙТЕ (реклама, сотрудничество, отзыв о сервисе), пишите на почту [email protected]. Только все общие вопросы размещайте на сайте, на них ответ по почте не предоставляется.