Расположите повернута вправо диапазон

Question

Я хочу создать DIV, в котором должен быть текст, как это:

Но я не в состоянии расположить текст справа. Поскольку я использую transform: rotate(-90deg);, я полностью смущен насчет left, right, top и bottom.

Edit: Мой основной вопрос о том, почему разрывы текста иногда, почему есть такие вещи, как right: -32px; и есть хороший способ держать все реагирующие (различные длины текста, различную длину й блока повторно ). Я добавил снимок экрана, чтобы показать, в каком контексте я хотел бы использовать:

HTML:

<div class="chart-block" id="block2" style="height: 90%; left: 120px;"> 
    <div> 
     <span>The Cup of tea</span> 
    </div> 
</div> 

CSS:

.chart-block { 
    display: block; 
    position: absolute; 
    left: 40px; 
    bottom: 0; 
    width: 40px; 
    background-color: #ef0707; 
} 

.chart-block > div { 
    display: block; 
    position: relative; 
    width: 100%; 
    height: 100%; 
} 

.chart-block > div > span { 
    display: block; 
    -webkit-transform: rotate(-90deg); 
    transform: rotate(-90deg); 
    -ms-transform: rotate(-90deg); 
    color: white; 
    font-size: 10px; 
} 

http://jsfiddle.net/wumm/3x9Qv/

Answer 1

Может быть, это то, что вы хотите

CSS (только промежуток, остальное остается тем же)

.chart-block > div > span { 
    display: block; 
    -webkit-transform: rotate(-90deg); 
    transform: rotate(-90deg); 
    -ms-transform: rotate(-90deg); 
    color: white; 
    font-size: 10px; 
    width: 200px; 
    left: 50%; 
    bottom: 0px; 
    position: absolute; 
    -webkit-transform-origin: 0% 50%; 
    transform-origin: 0% 50%; 
} 

updated demo

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

Answer 2

I would do it something like this. Я поворачиваю весь блок, вместо этого только текст. Таким образом, вы можете позиционировать текст более обычным образом.

HTML:

<div class="chart-block" id="block2"> 
    <span>The Cup of tea</span> 
</div> 

CSS:

.chart-block { 
    display: block; 
    position: absolute; 
    width: 400px; 
    height: 40px; 
    left: 40px; 
    background-color: #ef0707; 
    -webkit-transform: rotate(-90deg); 
    -transform: rotate(-90deg); 
    -ms-transform: rotate(-90deg); 
} 

.chart-block span { 
    display: block; 
    color: white; 
    font-size: 16px; 
    padding: 5px; 
} 

Answer 3

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

HTML:

<div class="chart-block" id="block2" style="height: 90%; left: 120px;"> 
    <div> 
     <span>The Cup of tea</span> 
    </div> 
</div> 

CSS:

.chart-block { 
    display: block; 
    position: absolute; 
    left: 40px; 
    bottom: 0; 
    width: 40px; 
    overflow: hidden; 
    background-color: #ef0707; 
    transition: height ease 1s; 
} 

.chart-block > div { 
    display: block; 
    position: relative; 
    width: 100%; 
    height: 100%; 
} 

.chart-block > div > span { 
    display: block; 
    -webkit-transform: rotate(-90deg); 
    transform: rotate(-90deg); 
    -ms-transform: rotate(-90deg); 
    color: white; 
    font-size: 10px; 
    position:absolute; 
    bottom:15px; 
    left:0; 
} 

See this fiddle

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

Answer 4

Вы хотите его просто на странице - или замерзнуть на месте?

У нас есть «Обратная связь» связь, мы покажем в сноске для небольших экранов, и в правом верхнем углу для больших экранов: http://jsfiddle.net/wHL7g/

HTML-:

<div class="feedbackRequest"> 
    <a href="/feedback" data-role="none">Feedback</a> 
</div> 

CSS-:

.feedbackRequest { 
    color: #05afba; 
    margin: 0 auto; 
} 
.feedbackRequest a { 
    background-color: #ffffff; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    -ms-border-radius: 4px; 
    -o-border-radius: 4px; 
    border-radius: 4px; 
    border: solid 1px #05afba; 
    color: #05afba; 
    display: block; 
    margin: 10px auto 0 auto; 
    padding: 5px 10px; 
    text-align: center; 
    text-decoration: none; 
    width: 70px; 
} 
.feedbackRequest a:hover { 
    border: solid 1px #025257; 
    color: #025257; 
    text-decoration: none; 
} 
@media only screen and (min-width: 360px) { 
    .feedbackRequest { 
    position: fixed; 
    top: 100px; 
    right: -32px; 
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    -o-transform: rotate(-90deg); 
    -ms-transform: rotate(-90deg); 
    transform: rotate(-90deg); 
    z-index: 1000; 
    } 
    .feedbackRequest a { 
    margin: 0; 
    width: auto; 
    } 
}