Форум PHP программистов > Абзацы прижатые к правому боку

[ Поиск ] - [ Пользователи ] - [ Календарь ]

Полная Версия: Абзацы прижатые к правому боку

seine

24.07.2010 - 22:38

Привет всем, как сделать, чтоб абзацы были придвинуты к правому боку, но чтоб при этом html был вида:

<div class="toRight">
    <p>un</p>
    <p>deux</p>
    <p>trois</p>
</div>

У дива нельзя указать атрибут align="right", все должно быть сосредоточенно в одном классе для дива. Пытался делать через float: right для p, но в таком случае весь последующий текст поднимается выше, а этого не должно быть, справа от тегов p должно быть пусто. Пока единственный вариант - это задать padding-left для дива или margin-left для абзаца, но это тоже не выход, т.к. ширина дива меняется, а абзацы должен всегда быть одной ширины и прижаты к правой стороне дива.
Есть идеи?

Спустя 7 минут, 5 секунд (24.07.2010 - 21:45) Basili4 написал(а):

Ты все идеи. отверг

а нельзя вместо p таблицу использовать

Спустя 6 минут, 41 секунда (24.07.2010 - 21:52) seine написал(а):

Неа, хотелось бы именно в том виде, в котором написал выше. Если это невозможно, то придется, что-то другое использововать. Я в css не силен, но мне кажется, что способ должен быть.
Может я не понятно написал, но стиль для тега p менять можно, но все должно идти через класс дива, т.е. так

.toRight p {}

Но нельзя ничего менять в самомо html-коде.

Спустя 8 минут, 15 секунд (24.07.2010 - 22:00) Basili4 написал(а):

.toRight p
{
width: 100%;
text-align: right;
}

так пойдет ?

Спустя 38 минут, 2 секунды (24.07.2010 - 22:38) seine написал(а):

width: 100%;
text-align: right;

Нет, не пойдет(
Что б было ясней, это верстка для эпиграфа: несколько абзацев, оформленных по всем правил, вот только прижатые к правому боку. А такие жесткие требования к html-коду, потому что визивиг оформляет в таком виде.

Спустя 8 минут, 13 секунд (24.07.2010 - 22:46) Basili4 написал(а):

тогда нужен новый класс одним классом не сделать

Спустя 1 час, 17 минут, 23 секунды (25.07.2010 - 00:03) Ice написал(а):


div.toRight {
    border: red 1px solid;
    text-align:right;
}

Спустя 25 минут, 29 секунд (25.07.2010 - 00:29) SvSerg написал(а):

Что за такие жёсткие правила........А нельза вообще отдельный блок для текста сделать и проблем не будет.

Спустя 10 часов, 59 минут, 50 секунд (25.07.2010 - 11:29) seine написал(а):

Ice, так тоже пробовал, но все равно абзацы к левой стороне прижаты.

Цитата (Ice @ 24.07.2010 - 21:03)

А нельза вообще отдельный блок для текста сделать

Т.е.?

Кажется, не получиться сделать в таком виде как я хочу( Буду чего-то добавлять в код.

Спустя 2 минуты, 53 секунды (25.07.2010 - 11:32) Basili4 написал(а):

seine
Да не в код тебе надо просто создать новый класс CSS который будет размером не 100% а например 20% и будет к правому краю прижиматься и текст прижимать как ты хочешь

Спустя 20 минут, 30 секунд (25.07.2010 - 11:52) Bezdna написал(а):


<div class="toRight">
    <p>un</p>
    <p>deux</p>
    <p>trois</p>
</div>


.toRight {
position:relative;
width:100%;
}

p {
position:absolute;
right:0px;
width:20%;
}

Спустя 1 час, 41 минута, 54 секунды (25.07.2010 - 13:34) SvSerg написал(а):

<body>
<div class="toRight">
 <div class="text"><p>un</p>
                   <p>deux</p>
                   <p>trois</p>
 </div>                  
</div>

.toRight {
width:400px;
height:400px;
border:solid 1px #000;
}

.text{
width:30%;
height:100%;
border:dashed 1px #33F;
float:right;
}

Спустя 4 часа, 23 минуты, 17 секунд (25.07.2010 - 17:57) seine написал(а):

Bezdna, так параграфы накладываются друг на друга(

SvSerg, тоже вариант, если ничего не получится, то сделаю именно так)

Спустя 2 часа, 48 минут, 1 секунда (25.07.2010 - 20:45) Bezdna написал(а):

Цитата (seine @ 25.07.2010 - 17:57)

Bezdna, так параграфы накладываются друг на друга(

Я привёл условный код. Создай ещё один контейнер для параграфов, ничего наслаиваться не будет, причём, во-первых параметрами right, top, left и bottom можешь этот контейнер позиционировать как хочешь, во-вторых этот код кроссбраузерный и "резиновый".

Спустя 13 часов, 6 минут, 6 секунд (26.07.2010 - 09:51) трамонтана написал(а):

ёптить...я ваще ничо не понял в чом вопрос..
можно нарисовать как надо чтобы было разноцветными квадратиками?

Спустя 1 час, 12 минут, 17 секунд (26.07.2010 - 11:04) seine написал(а):

Bezdna, ага я понял. Правда только сейчас заметил, что в твоем варианте и в варианте SvSerg высота автоматически не определяется.

Я сделал таким способом:

.toRight p {
    width: 250px;
    float: right;
}
	
.clear {
    clear: both;
}

<div class="toRight">
    <p>un</p>
    <p>deux</p>
    <p>trois</p>
    <div class="clear"></div>
</div>

Но это все таки не то, чего я хотел

Цитата (Bezdna @ 25.07.2010 - 17:45)

можно нарисовать как надо чтобы было разноцветными квадратиками?

Вот:

Спустя 16 минут, 28 секунд (26.07.2010 - 11:20) Slays написал(а):

ты бы лучше нарисовал условно всю страницу и как там должен вести себя данный блок

если тебе надо чтобы:
- див был на всю ширину
- параграфы в этом диве справа
- слева и справа параграфов ничего нет
- высота определялась автоматически

то как и сказали, лучше создать отдельный див для параграфов, например div.ep

div.toRight{
overflow:hidden;
position:relative;
width:100%;
}

div.toRight div.ep {
width: 250px;
float: right;
}

div.toRight div.ep p {
clear:left;
}

Спустя 53 минуты, 35 секунд (26.07.2010 - 12:14) seine написал(а):

Slays, взял твой код и начал потихонку менять на ту структуру, которая мне нужна. Изменил и заработало 0_о
Я аж офигел, напомню, мне нужно было, чтоб html-код был такой:

<div class="toRight">
    <p>un</p>
    <p>deux</p>
    <p>trois</p>
</div>

Т.е. никаких дополнительных контейнеров. Начал смотреть в чем дело, оказалось все в overflow:hidden) Вот как выглядит весь код теперь:

.toRight{
	overflow: hidden;
	width: 100%;
}

.toRight p {
	width: 250px;
	float: right;
	clear: both;
}

<div class="toRight">
    <p>un</p>
    <p>deux</p>
    <p>trois</p>
</div>

Слева от абзацев пусто, абзацы прижаты к правому краю, но при этом сам код именно такой, какой и нужен) А если убрать overflow, то все портится.

Спустя 17 минут, 32 секунды (26.07.2010 - 12:31) трамонтана написал(а):

можно ещё .toRight{float:right}

- да он может уехать, но зато тоже расстянет по высоте если внутри у эелементов есть float

Быстрый ответ:

Здесь расположена полная версия этой страницы.