Размещение span в более конкретной позиции в div - PullRequest
Новая
       1

Размещение span в более конкретной позиции в div

3 голосов
/ 11 марта 2011

У меня есть 3 span теги (x, y и z) внутри тега div, где span z является последним в div. Я хочу, чтобы текст в пределах диапазона z отображался справа внизу от div. Как я могу это сделать?

Я пробовал следующий код, но он не работает: 

<span align="right" style="font-size: 0.76em;" >my text here</span>

Ответы [ 3 ]

5 голосов
/ 11 марта 2011

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

Сделайте это div с помощью style="position:absolute;right:0;bottom:0;text-align:right'

Убедитесь, что содержащий div имеет style="position:relative;" для содержания абсолютного объекта.

JSfiddle: http://jsfiddle.net/gHZqs/

Редактировать

Вы можете использовать тег span вместо div, как уже говорили другие.Однако теги span предназначены для встроенного содержимого.Если вы берете контент из потока с абсолютным позиционированием, вам следует использовать div IMO.Если вы работаете в рамках фреймворка или чего-то еще, и вам нужно использовать тег span, я бы не стал спать по этому поводу.Вот ссылка на похожий вопрос:

SPAN vs DIV (inline-block)

2 голосов
/ 11 марта 2011

То же самое, что говорит @RSG, однако вы можете использовать span вместо преобразования его в DIV.Назначьте родительский контейнер position:relative, а затем присвойте span.z со следующим css: 

span.z{
    position:absolute;
    bottom:0;
    right:0;
}

См. Рабочий пример здесь: http://jsfiddle.net/crYaw/1/

HTML: 

<div id="container">
    <p>Test here. Test here. Test here. Test here. Test here. Test here. Test here. Test here. </p>
    <p>This is some <span class="x">more</span> text</p>
    <p>This <span class="y"is some</span> >more text</p>
        <span class="z">Float me bottom right</span>
</div>

CSS: 

#container{
    position:relative;
    width:500px;
    height:200px;
    background-color:#eee;
}

span.x{
    font-weight:bold;
}

span.y{
    color:red;
}

span.z{
    position:absolute;
    bottom:0;
    right:0;
}
0 голосов
/ 11 марта 2011

Существует значение text-align css, которое можно использовать, но оно применяется только к элементам уровня блока и содержимому в элементе уровня блока (в данном случае ваш div).Поскольку вы не хотите, чтобы все элементы в элементе div были выровнены по правому краю, вы можете либо float:right; диапазон z, либо обернуть его в другой элемент div с text-align:right;.Вот оба решения:

http://jsfiddle.net/y9pvv/1/

...