| |
|
|
| | Всем привет. Есть верстка (описывающая месячный календарь):
<div class="calendar">
<div class="row">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell">
<div class="event"></div>
<div class="event"></div>
</div>
<div class="cell"></div>
<div class="cell"></div>
</div>
</div>
|
и CSS:
div.calendar-container div.calendar
{
width: 100%;
background-color: #ffffff;
}
div.calendar-container div.calendar div.row
{
width: 100%;
border-bottom: 1px solid #d3d3d3;
}
div.calendar-container div.calendar div.row div.cell
{
float: left;
width: 13%;
min-height: 100px;
border-right: 1px solid #d3d3d3;
padding: 5px;
}
div.calendar-container div.calendar div.row div.cell div.event
{
background-color: #ffdc87;
padding: 5px;
font-size: 12px;
font-weight: normal;
margin-bottom: 3px;
cursor: pointer;
margin-top: 3px;
color: #000;
}
|
Проблема в том, что если в календаре слишком много событий (div с классом event), то див отвечающий за этот день (див с классом cell) уходит вниз, а остальные (слева и справа) остаются такой же высоты.
Как нибудь можно сделать чтобы соседние также расширялись по вертикали?
Спасибо | |
| |
|
|
| |
|
|
| |
для: malish
(07.07.2011 в 17:02)
| | | Нет, "автоматически" (HTML+CSS) такое сделать нельзя.
Потому что объединение двух-трёх и более div'ов в одном внешнем div'е никак не делает внутренние div'ы зависимыми друг от друга.
Сделать такое можно только "принудительно" - при помощи JS. И, разумеется, только после окончания загрузки всего содержимого во все блоки, входящие во внешний <div class="calendar">. | |
| |
|
|
| |
|
|
| |
для: АЯ
(07.07.2011 в 21:34)
| | | Спасибо за ответ.
Вот, нашел решение. Конечно не изящное, но вроде во всех современных браузерах работает | |
| |
|
|
| |
|
|
| |
для: malish
(08.07.2011 в 08:35)
| | | Это - не решение, а извращение.
Попробуйте назначить внутренним div'ам бордеры и паддинги - и сами в этом убедитесь. | |
| |
|
|
| |
|
|
| |
для: malish
(08.07.2011 в 08:35)
| | | В таком случае напрашивается таблица. Есхли хотите блоками - придется использовать javaScript, который будут выравнивать высоты. Попробуйте Jquery. | |
| |
|
|
