Вопрос по css3, css-transforms, css, html – Блок высоты 100% с вертикальным текстом

14

У меня есть блок переменной высоты, в который я хочу поместить другой блок со 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

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

UPDATE:

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

enter image description here

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

Ваш Ответ

4   ответа
0

так. Вам нужно знать точную высоту ауттераdiv.

@Airzooka, посмотриmy answer :)
Скорее всего ты прав. Но я подожду еще пару дней. Благодарю. spatar
Не волнуйтесь. Если кто-то ещеdoes опубликуйте решение, и я очень хочу его прочитать!
24

<table> потому что это казалось самым простым способом достичь того, что вы искали, поэтому я вырезал это из уравнения и использовал вместо этого семантический HTML. Если была другая причина, я заранее прошу прощения, и вы сможете перенести стили, чтобы использовать<table> вместо.

УвидетьjsFiddle demo просмотреть код в действии. Или перейдите к коду:

HTML
<section class="wrapper">
    <header><h1>Test</h1></header>
    <article>Text.</article><!--
    --><article>More text.</article><!--
    --><article>Photos of cats.</article><!--
    --><article>More photos of cats.</article>
</section>
CSS
.wrapper {
    margin:1em;
    position:relative;
    padding-left:2em; /* line-height of .wrapper div:first-child span */
    background:#fed;
}
.wrapper header {
    display:block;
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    width:2em; /* line-height of .wrapper div:first-child span */
    overflow:hidden;
    white-space:nowrap;
}
.wrapper header h1 {
    -moz-transform-origin:0 50%;
    -moz-transform:rotate(-90deg) translate(-50%, 50%);
    -webkit-transform-origin:0 50%;
    -webkit-transform:rotate(-90deg) translate(-50%, 50%);
    -o-transform-origin:0 50%;
    -o-transform:rotate(-90deg) translate(-50%, 50%);
    -ms-transform-origin:0 50%;
    -ms-transform:rotate(-90deg) translate(-50%, 50%);
    transform-origin:0 50%;
    transform:rotate(-90deg) translate(-50%, 50%);
    position:absolute;
    top:0;
    bottom:0;
    height:2em; /* line-height of .wrapper div:first-child span */
    margin:auto;
    font-weight:bold;
    font-size:1em;
    line-height:2em; /* Copy to other locations */
}
.wrapper article {
    display:inline-block;
    width:25%;
    padding:1em 1em 1em 0;
    vertical-align:middle;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -ms-box-sizing:border-box;
    -o-box-sizing:border-box;
    box-sizing:border-box;
}
How it works

<header> установлен на высоту.wrapper и имеет егоwidth установлен в2em (ценностьline-height для<h1>). Затем<h1> вертикально выровнен (сtop:0;bottom:0;height:2em;margin:auto; [2em также изline-height]). Однажды<h1> выровнен по вертикали, он повернут против часовой стрелки на 90 градусов к середине его левой стороны. Для того, чтобы сделать<h1> снова видно, это переводится50% вертикально (чтобы вытащить его обратно на экран горизонтально) и-50% по горизонтали (чтобы выровнять его по вертикали). И да, формулировка правильная - все становится запутанным, когда вы поворачиваетесь на [-] 90 градусов;)

Gotchas Only a static "height" is supported for the <h1>. In this case, only 1 line is supported. Wrapping will not work (I've actually disabled it in this example), so anything that doesn't fit in the height of .wrapper will be hidden.
Это просто потрясающе! Спасибо! spatar
@spatar, в этом ответе чего-то не хватает за вознаграждение? Или просто ждать до конца, чтобы назначить его?
Оказывается, просто удаляяmargin: auto; сделает свое дело, и чтобы изменить положение по вертикали, вы можете просто настроитьmargin-top/bottom свойства.
@Nightfirecat, на самом деле, было бы лучше: удалитьbottom:0; а такжеmargin:auto;, менятьtransform-origin в0 0и изменитьtransform вrotate(-90deg) translate(-100%, 0) за.wrapper header h1, Увидетьtop-aligned example, Чтобы выровнять его снизу, сделайте то же самое, кроме удаленияtop:0; вместоbottom:0;, Увидетьbottom-aligned example.
Взглянул на эту проблему и сразу подумал о таком решении. Отличный ответ! Любопытно, однако, используя предоставленный вами код, как вы могли бы сделать «выравнивание по правому краю»? (или выравнивание по верху, я полагаю) текст, который был повернут?
0

<!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">
.block2 {
    width: 100%;
    border: 4px solid red;
}
.msg {
    display: inline-block;
    white-space: nowrap;
    font-family: Verdana;
    font-size: 14pt;
}
.block1 {
    border: 4px solid #888;
    -moz-transform: rotate(-90deg);
    -moz-transform-origin: right top;
    -webkit-transform: rotate(-90deg);
    -webkit-transform-origin: right top;
    -ms-transform: rotate(-90deg);
    -ms-transform-origin: right top;
    text-align:center;
}
</style>
</head>
<body>
    <div class="block1">
        <table class="block2">
        <tr>
            <td>
                <div class="msg">Hi there!</div>
            </td>
        </tr>
        </table>
    </div>
<style>
.block1{
width:500px;
margin-left:-500px;
}
</style>
</body>
</html>
switched the transformation to the outer element, then used width attribute to define the height at the bottom of the page (when you play with that, you are actually playing with the height there.) and for the empty left space visible after rotation, I used the variable width (height) as negative margin.

Вы можете видеть это здесь:http://pastehtml.com/view/c0hl7zxci.html

На самом деле я не хочу вращать внешнююdiv потому что идея заключалась в том, чтобы сложить большеdivs внутри с обычным (не повернутым) текстом. Извините, если мне не ясно. Я прилагаю новую картинку к вопросу, чтобы показать, какова моя конечная цель. spatar
0

http://jsfiddle.net/EwgtT/

Переменная высота block1 не будет проблемой, но переменная высота вашего сообщения:; это всегда будет начинаться снизу.

Edit: Обновлен, поэтому он хорошо работает в FF и IE:http://jsfiddle.net/EwgtT/2/

Я попробовал ваш код в Firefox, и текст появляется внизу страницы, вне красного блока. spatar
Хм, ты прав. Разница между Chrome и FF.
@spatar: я обновил jsfiddle

Похожие вопросы