Вопросы Теги

Блок высотой 100% с вертикальным текстом

У меня есть блок переменной высоты, в который я хочу поместить другой блок со 100% высотой и вертикальным текстом (направление снизу вверх) и сложить его слева от блока внешний блок. Есть ли способ добиться этого с помощью преобразований CSS, но без вычислений ширины и высоты в JS?

Sketch

Вот что я смог получить:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css">
.block1 {
    border: 4px solid #888;
    height: 120px;
    width: 200px;
}
.block2 {
    height: 100%;
    border: 4px solid red;
}
.msg {
    display: inline-block;
    white-space: nowrap;
    font-family: Verdana;
    font-size: 14pt;
    -moz-transform: rotate(-90deg);
    -moz-transform-origin: center center;
    -webkit-transform: rotate(-90deg);
    -webkit-transform-origin: center center;
    -ms-transform: rotate(-90deg);
    -ms-transform-origin: center center;
}
</style>
</head>
<body>
    <div class="block1">
        <table class="block2">
        <tr>
            <td>
                <div class="msg">Hi there!</div>
            </td>
        </tr>
        </table>
    </div>
</body>
</html>

My test

Вы можете видеть, что вычисленная ширина внутреннего блока такая же, как ширина текста до поворота.

ОБНОВЛЕНИЕ:

Вот картина того, что я хочу получить в итоге:

enter image description here

Это горизонтальная полоса с элементами, сложенными слева от нее, и с вертикальным блоком заголовка. Высота полосы варьируется, поэтому элементы должны адаптироваться, а текст заголовка должен оставаться по центру.

14
задан spatar 6 June 2012 в 03:33
поделиться